[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

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

[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.
If a post contains illegal content, please click on its [Report] button and follow the instructions.
This is a 4chan archive - all of the content originated from them. If you need information for a Poster - you need to contact them.
This website shows only archived content and is not affiliated with 4chan in any way.
If you like this website please support us by donating with Bitcoin at 1XVgDnu36zCj97gLdeSwHMdiJaBkqhtMK