Equal height boxes with CSS, part II
Update: Reading the comments to this, I can see that several people have misunderstood what I’m doing here. This does not make IE display equal height boxes. Only browsers that support
display:table will do that. IE is fed an alternative set of CSS rules to make it display the boxes in the normal, unequal height, way instead of breaking the layout completely.
Since Internet Explorer doesn’t support the
display:table-cell properties, it obviously messes up the display of my little Equal height boxes demo. Bleh.
You could still use that technique though. Depending on your audience, and how important to the overall layout the equal height boxes are, you may get away with letting IE display the boxes with different heights. It may not look too horrible. Doing so would also be a case of Progressive Enhancement, which is an interesting concept.
Anyway, to do that you would need to send IE a set of CSS rules that will override the stuff related to
display:table. There are several ways to do that, each with its own potential problems. Just for the sake of this demo, I have used conditional comments.
The XHTML is the same as in the first demo, except for a conditional comment that contains a clearer div for IE:
<div class="equal"> <div class="row"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <!--[if IE]> <div class="ieclearer"></div> <![endif]--> </div> </div>
A conditional comment is also used to send the overriding CSS to IE. The div elements are set to
display:block and floated either left or right. Check out the Equal height boxes with CSS, part II demo for the complete code.
One problem remains. IE/Mac doesn’t support conditional comments, and gets the same CSS as the better browsers. It can’t handle that and breaks the layout. There are ways to work around that, but I haven’t taken the time.
This is mostly a proof of concept, and there are probably smarter ways to feed the alternative CSS rules to IE.