How to make 3 “li” columns with variable height co

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

To take user1797792's solution a step further, you need to clear out the explicit inline height declaration on elements in order to be able to reuse the function in a responsive layout. In this case, I was resizing li elements inside a parent ul called 'prods'.

function resizeProds(){
    for (var i = 0; i < $("#prods").children().length; i++) {
        if (i % liPerRow == 0) {
            // split the list in the li items for just this 'row'
            var items = $($("#prods").children().splice(i, liPerRow));
            items.height('');
            // get the highest Height value in this list
            maxHeight = Math.max.apply(null, items.map(function () {
                return $(this).height();
            }).get());
            items.height(maxHeight);
        }
    }
}

Answer 2

Derive version from William G. Rivera's answer for consistent look through the all browsers including IE7, display: table; free. It is bit cheating and do not makes div's equal heights, but visually this is the same

HTML

<ul>
  <li class="one">
    <div class="one">Variable Height Title</div>
    <div class="one">Variable Height Title that Might be two lines longgggggg</div>
    <div class="one">Variable Height Title</div>
    <div class="clear"></div>
  </li>
  <li class="two">
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    <div class="two">Fixed height middle block</div>
    <div class="clear"></div>
  </li>
  <li class="three">
    <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
    <div class="three">Variable height middle block</div>
    <div class="three">Variable height middle block</div>
    <div class="clear"></div>
  </li>
  <li class="four">
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
    <div class="four">Fixed height footer</div>
    <div class="clear"></div>
  </li>
</ul>

CSS

div {
  float: left;
  width:33%;
}

.one, .three {
  background-color:blue;
}
.two, .four {
  background-color:green;
}

.clear {
    width: 100%;
    clear: both;
    float: none;
    height: 0;
}

http://jsfiddle.net/YWtSe/2/

Answer 3

What you need isn't possible without some HTML changes.

A possible alternative, with some HTML changes, is to threat the element as a table, the

as a table row and the as a table cell. You will need to have all elements in the same row (li) and an extra li element as the footer

For example:

<ul>
    <li>
        <div class="one">Variable Height Title</div>
        <div class="one">Variable Height Title that Might be two lines long</div>
        <div class="one">Variable Height Title</div>
    </li>
    <li>
        <div class="two">Fixed height middle block</div>
        <div class="two">Fixed height middle block</div>
        <div class="two">Fixed height middle block</div>
    </li>
    <li>
        <div class="three">Variable height middle block<br />more content<br /> more contentmore content<br /> more content<br /> more content</div>
        <div class="three">Variable height middle block</div>
        <div class="three">Variable height middle block</div>
    </li>
    <li>
        <div class="four">Fixed height footer</div>
        <div class="four">Fixed height footer</div>
        <div class="four">Fixed height footer</div>
    </li>

</ul>

You can take a look here: http://jsfiddle.net/WffHD/25/