Jan 23 2008
CSS Hack: Cross-Browser “min-height” Hack
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
So CSS can be a bit frustrating from time to time. While working on the reskin of this site, one problem I kept running into was the css attribute “min-height” wasn’t always working. How did I get around it? With a little help from Grey Wyvern (who just so happens to be the #1 Google result for “div min-height”).
|
|
In my example, I wanted to make room for those little post previews you see (they were overlapping the metadata div if the accompanying text height was smaller than 110px, the size of the image).
How do we fix this? Well, in an ideal world, the min-height tag would work, like so:
.entry {
min-height: 110px;
}
But, of course, it didn’t. So, how else can this be done?
The Prop Div
Without a height attribute, the .entry div will fit the height of whatever it contains. (Duh, that’s the default behavior of a div container!). So, if we want it to have a minimum of 110px height, we can just insert another div inside with a defined height of 110px:
.prop {
height: 110px;
}
And insert this inside the .entry div:
<div class="entry">
<div class="prop"></div>
Div contents go here!
</div>
But wait! We can’t just stop there! For one, your formatting is probably all messed up. So what can we do? First of all, we can define the width, telling it to only take up 1px:
.prop {
height: 110px;
width: 1px;
}
Finally, we can move it to the right, minimizing any damage caused even further:
.prop {
height: 110px;
width: 1px;
float: right;
}
Much better! …In Firefox that is.
That’s right, in classic CSS fashion, this hack doesn’t quite work in IE…yet. But we’re about to fix that using…
The Clear Div
You see, in IE, the height attribute doesn’t do anything if it has nothing to “push down” on. By adding another div for it to push on, IE will implement this hack correctly:
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
And add it to your page, like so:
<div class="post">
<div class="prop"></div>
Content
Content
Content
<div class="clear"></div>
</div>
Now your div should never shrink below 110px (or whatever value you provided for “prop”)! Best of all, this code doesn’t use any selector hacks, so it will validate! Double score!
As always, any questions, comments, criticisms, let me know below!
Sphere: Related ContentIf you found this article useful and use StumbleUpon, please give it a 
thumbs up so more people can read it! Thank you!
Please take the time to check out this thread and leave a comment letting me know what you would like to see from this site. It's still relatively young and trying to find its way- you can make design pitstop the resource you always wanted!
Ray Ellis
February 15th, 2008 at 3:09 am ()
Thank you, George, for the clean solution. It works nicely in both IE and Firefox for my application. I like the way it is easy to implement in both the CSS and the HTML code.
-ray
jbj
February 24th, 2008 at 2:32 pm ()
Hi, and thx for the article.
Btw, you should try this:
.myClass{
min-height:100px;
height:auto !important;
height: 100px;
}
Explanation: For browsers who understand min-height, let them use it. IE6 don’t understand anything with the !important directive, so the second line will be only for better browsers.
And finally, for IE6 the height property works as min-height. So this will be applied by IE6, but not any other browsers, due to the !important directive.
Venkateswara Rao
June 28th, 2008 at 5:39 am ()
Thank you for great hack.
Hi jbj, your solutions works better