[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y ] [Home]
4chanarchives logo
any css masters here? i've been fiddling around like crazy
Images are sometimes not shown due to bandwidth/network limitations. Refreshing the page usually helps.

You are currently reading a thread in /g/ - Technology

Thread replies: 3
Thread images: 1
File: css-divs.png (11 KB, 745x486) Image search: [Google]
css-divs.png
11 KB, 745x486
any css masters here?
i've been fiddling around like crazy trying to achieve the following:

>2 divs side by side
>div 1: fixed height, text vertically aligned (display:table-cell; vertical-align:middle;)
>div 2: variable height, text starting on top

can you help me?
>>
>>55600659
>vertical-align:middle;

Centring something vertically is notoriously impossible

There are various hacks you can use, but the actual CSS 3 solution is to use the Flex-box element.

Flex-box is not supported by older browsers but the vast majority of people now are on browsers that DO support it (since basically no one is using old versions of IE now).

So yeah, look up flex-box.
>>
>>55600857
>flex-box
i did, but it didn't work as planned.

vertical-align:middle works when you use display:table-cell in the same div as well, and then display:table in a wrapper.

i made the above solution work with an extra div inside div1. here's the fiddle:

https://jsfiddle.net/1g3mash9/
Thread replies: 3
Thread images: 1

banner
banner
[Boards: 3 / a / aco / adv / an / asp / b / biz / c / cgl / ck / cm / co / d / diy / e / fa / fit / g / gd / gif / h / hc / his / hm / hr / i / ic / int / jp / k / lgbt / lit / m / mlp / mu / n / news / o / out / p / po / pol / qa / r / r9k / s / s4s / sci / soc / sp / t / tg / toy / trash / trv / tv / u / v / vg / vp / vr / w / wg / wsg / wsr / x / y] [Home]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.
If a post contains personal/copyrighted/illegal content you can contact me at [email protected] with that post and thread number and it will be removed as soon as possible.
DMCA Content Takedown via dmca.com
All images are hosted on imgur.com, send takedown notices to them.
This is a 4chan archive - all of the content originated from them. If you need IP information for a Poster - you need to contact them. This website shows only archived content.