Question

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!

Answer 1

For IE7?

And Pure CSS?

And All Row 1 (Div “one”) Equal Height?

And all Columns Equal Height?

The answer is… Not possible.