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.
- Previous post: ieCapture
- Next post: Web Standards ROI
Sponsors
Authentic Jobs
Job openings from Authentic Jobs
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost
Comments
I have got IE6/Windows 2000 and it doesn’t work. Opera and Mozila are correct.
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.
Doesn’t work for me either.
http://www.456bereastreet.com/lab/equalheightii/
works fine in Mozilla.
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…
Mr K: Read my comment above. This is not an attempt to make IE do something it cannot do.
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! :)
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.
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.
Napoli: That probably explains it. I’m still wondering why people don’t take the time to read the text though ;)
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
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.
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, but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.