HTML:
<ul>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title Might be two lines long</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
<li>
<div class="one">Variable Height Title</div>
<div class="two">Fixed height middle block</div>
<div class="three">Variable height middle block</div>
<div class="four">Fixed height footer</div>
</li>
</ul>
CSS:
li {
float:left;
width:33%;
}
.one, .three {
background-color:blue;
}
.two, .four {
background-color:green;
}
Please look at this example: http://jsfiddle.net/WffHD/
Is there a way with css only to make the "one" divs equal height (which must be dynamic), and then also make all three columns equal height based on the tallest one as well? Another way of putting it: I want all "one" divs to be equal height, and then all columns should also be equal height by stretching the height of the "three" div. Unfortunately they must stay as li items due to a plugin I am using. I think this could be accomplished fairly easy with javascript but am looking for a css solution if possible. (Caveat, needs to work in IE7) Hope that makes sense and thanks!
Adding class ="frame-height" to all li elements, make all li elements the same height as the highest li element.
Basically what you do is make both divs/columns very tall by adding a padding-bottom: 100% and then "trick the browser" into thinking they aren't that tall using margin-bottom: -100% . It is better explained by Ed Eliot on his blog, which also includes many examples.
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 most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
The answer is... Not possible.
With great difficulty, or with JavaScript.
This is actually one of the things Flex Box Layout was designed for. So you would have something like this:
#mylist {
display: flex;
flex-flow: row wrap;
}
#mylist>li {
flex: 1 1 100%;
}
And it should give all the elements the same height. See the full Flex Box Layout specification for more options.
Just make sure you have the appropriate vendor prefixes, and you're good to go.
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