Menu
In CSS, I can do something like this: http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png http://s1.ipicture.ru/uploads/20120612/Uk1Z8iZ1.png
But I've no idea how to change that to something like: http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png http://s2.ipicture.ru/uploads/20120612/eI5sNTeu.png
The height is not fixed
Please help me do it! Thank you all in advance!
247
Answer: Use the CSS3 flexbox With CSS3 flex layout model you can very easily create the equal height columns or <div> elements that are aligned side by side. Just apply the display property with the value flex on the container element and the flex property with the value 1 on child elements.
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.
Place both DIVs into a container DIV that's set to 100% of page height and set both interior DIVS to 100%. They will fill up the container DIV and the height of both will be equal.
Adding class ="frame-height" to all li elements, make all li elements the same height as the highest li element.
I use this, pure css.
The html:
<div id="container" class="holder">
<div id="column-one" class="even-height">TEXT</div>
<div id="column-two" class="even-height">TEXT</div>
</div>
The css:
.holder {
overflow: hidden;
clear: both;
}
.holder .even-height {
float: left;
padding-bottom: 100000px;
margin-bottom: -100000px;
}
#column-one { width: 30%; }
#column-two { width: 70%; }
The columns can be any width you want actually. Anyway, super simple and cross-browser friendly.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
