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!
Related posts:
