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, 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

Comments

  1. I have got IE6/Windows 2000 and it doesn’t work. Opera and Mozila are correct.

  2. June 9, 2004 by Roger (Author comment)

    Well, that’s the whole point of this demo ;-) IE displays “normal” boxes while modern browsers like Mozilla, Opera, and Safari will make them the same height.

  3. June 9, 2004 by Tom

    Doesn’t work for me either.

    http://www.456bereastreet.com/lab/equalheightii/

    works fine in Mozilla.

  4. I don’t get it? Okay so in IE your first one is totally screwed as IE stacks the boxes, while other browsers create 3 similarly sized white boxes with brown borders.

    Your new example, shows that you’ve mastered the ability to stop IE from stacking the boxes but they are all different heights. I was looking to see if you had a hack or trick to actually get IE to correctly display all 3 as the same height.

    Nice try though…

  5. June 10, 2004 by Roger (Author comment)

    Mr K: Read my comment above. This is not an attempt to make IE do something it cannot do.

  6. June 13, 2004 by Lucas Saud

    hi,

    second demo doesnt work on IE6.0 (winXP SP2)

    but when i try to add ‘height’ and ‘min-height’ values to IE CSS it’s works fine! :)

  7. June 14, 2004 by Mike

    Amazes me how many people are commenting about IE not handling the demo properly, when it CLEARLY states that IE won’t and the demo wasn’t intended to have IE handle it the same as the behaved browsers like Safari and Mozilla.

  8. June 16, 2004 by Napoli Bona

    The reason that some readers are under the impression that the IE should work with the demo, is that a link to your article from CSS Vault includes the following description:

    How to achieve equal heights in browsers including IE. Uses conditional comments which are not supported by every browser.

  9. June 16, 2004 by Roger (Author comment)

    Napoli: That probably explains it. I’m still wondering why people don’t take the time to read the text though ;)

  10. why dont you just set a min-height. IE understands height, and will expand beyond the height if the content pushes it taller. the only situation you need to use display: table is when you need this for safari, as safari doesnt understand min-height, but will act like PC IE when height, and display: table is applied.

    so this code for setting same height is not as efficient as it should be.

    -ben

  11. June 19, 2004 by Roger (Author comment)

    Ben: min-height only works unless one of the boxes needs to be taller than whatever value min-height is set to. Only that box will expand, not the others, since they aren’t “connected” the way they are when display:table is used.

  12. June 20, 2004 by Philipp Bunge

    Roger, With all the IE discussion here no one has really thanked for this great article; THANK YOU!! :-)

    I had never run into display:table before and that it won’t work in non/almost standards compliant browsers is something I am willing to live with.

    Thanks again, Philipp

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.