If you do table-less designs with CSS, you may have noticed that using float on a DIV won’t push it’s container DIV down, so that the container is at least the same height as the floater. For example, on this Blog, the right navigation is formed using float:right but I was having problems when the text in this box was shorter than the content of my nav bar.
In IE you can use height on the container, but in Firefox, once the content of that container is too long, it runs outside the borders. In Firefox, you can use min-height, but IE doesn’t recognize it. IE actually handles height the same way firefox handles min-height. So I found a “hack” to make it work in both browsers:
#container{min-height:500px}
* html #container {height:500px}
I’m not really sure why it works, but quite frankly, I don’t care.
Subscribe to
It was driving me insane; this table-less approach with css sounds great but I have encountered so many problems across Browsers; thanks for the hack.
Hey guys… here is a fix for both IE and Mozilla… In the parent class do this
overflow:auto;
height:1%;
This is another hack I can’t explain, but it fixes in both browsers and took me hours to finally find an easy fix.
Thanks! this is my problem that i need to fix.. keep it up!
Tnx man you just saved me!
Thanks, I had this problem and like you say somehow it has fixed it!!
<!–[if IE]>
<link rel=”stylesheet” href=”css/iefixes.css”>
<[endif]–> isn’t bad either
#container{min-height:500px;_height:500px}
should work ok too. _height is interpreted by ie and not by ‘real’ browsers
Thanks, this solved what could have been a really big problem with an important site I’m developing.
Thank you so much! It worked !!!
I just came across this Full List.
Great hack… IE is crap.
Wow … it works. I too have no idea why on earth it would work. Very bizzare. Thanks for the great site, and you’re number in the Google results.
Sopel I love you, man!
I was having trouble with this very issue while coming up with a new “no-HTML-tables” design for my other site http://www.rocketry.org (new site still being built) - and this page and it’s comments helped me from pulling the rest of my hair out.. You guys are badass !
min-height: 465px;
height: 465px;
It’s so simple, but it worked!@#
The test that worked is at
http://dev.rocketry.org/test_css.php
Tim
Thanks so much man,
Your solution fixed everything!
I can’t get any of the hacks to work. I have images floated to one side, each with caption and text flowing round. Except that the text is often too little to keep the image enclosed in the container. AND on top of that, each image is a different height, some radically so, so I can’t use a fixed height hack.
Heading back to tables ….
Wicked — I used the “_height” hack listed here and it works perfectly. Thanks for the help!
You have got to be kidding me…this is awesome! You’ve saved my ass and my bacon!
I’d set the height of my content area to 400px and set the overflow to auto to compensate (you should have heard the ruccess the users throw up), thanks guys…
Why can’t people use a real browser…
Yep, worked spot on for me too. Another problem solved. Thanks.
Wow! Works great saved my ass too! Thank you so much for that.
Thank you so much, i spent so much time trying to find a solution to this bug!!
this was posted in 2004 and the bug still hasnt been fixed? pathetic. -_- in any case, that little trick worked and im very grateful, thanks!
Awesome!! You saved alot of work!
_height is wicked. Thanks.
But the css do not validate at http://www.w3.org!!!!!
If you want valid code, I suggest using Ander’s solution above.
_hack is bad coding practice!
to trick ie 6 without hacking use
height:400px;
min-height:auto!important;
This works cuz Mozilla doesn’t understand:
IE 6 (below) doesn’t understand min-height and normal browsers don’t understand:
* html #container {height:500px}
The prob is that we have a hybrid:
IE 5 for Mac does understand the bottom guy…so you need to do the IE 5 escape hack:
/* mac hide \*/
* html #container {height:500px}
/* end hide */
Sucks doesn’t it?