Posted by richard on 11/28/07 13:44

On Wed, 28 Nov 2007 10:12:52 +0000, Mark wrote:

> Suppose I have two floated divs inside a container div to achieve a
> simple 2-column layout:
>
> <div id="contentcontainer">
> <div id="content">content column</div>
> <div id="navigation">nav</div>
> </div>
> <div id="footer">footer</div>
>
> On some pages it may be possible for there to be very little content in
> either column but on those pages, I don't want the layout to collapse to
> a tiny height. I'd like there to be whitespace after the content so the
> layout still has a reasonable height.
>
> What is the best way to impose a minimum height?
>
> I'm thinking you could do this:
>
> #contentcontainer {
> height: 200px; /* For IE lte 6 */
> }
> html>body #contentcontainer {
> height: auto;
> min-height: 200px;
> }
>
> 200px being a more or less random value.
>
> This seems to work OK, but is it a reliable method? Or should I put the
> height on one of the floated divs, not the container?

Use em, not px. An em will cause the div to vary with the height/width of
the text should the user change them. Then the minimum height would be 1em.

[Back to original message]