Equal height boxes with CSS, part II

Since Internet Explorer doesn’t support the display:table, display:table-row and 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.

Posted on June 1, 2004 in CSS