minimum height for a layout

M

Mark

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?
 
R

rf

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.

Why would you have pages with so little content that this tiny height
bothers you? URL?
 
R

richard

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.
 
A

Andy Dingley

This seems to work OK, but is it a reliable method?

You can either force a minimum height on the container, or you can add
an element with "clear" after the floated elements. Depends whether
you want to always force a minimum height (which might be a big empty
space), or just to force a minium height that's reliably bigger than
the float (to stop the floated elements hanging out of it).
Or should I put the
height on one of the floated divs, not the container?

No, because setting thhe height of a floated box definitely _won't_
set the height of its container. Read http://brainjar.com/css/positioning/
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top