Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > minimum height for a layout

Reply
Thread Tools

minimum height for a layout

 
 
Mark
Guest
Posts: n/a
 
      11-28-2007
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?
 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      11-28-2007

"Mark" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...

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

--
Richard.


 
Reply With Quote
 
 
 
 
richard
Guest
Posts: n/a
 
      11-28-2007
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.
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      11-28-2007
On 28 Nov, 10:12, Mark <(E-Mail Removed)> wrote:

> 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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Minimum form size with grid bag layout Marcin Rze╝nicki Java 6 10-26-2009 02:44 AM
Minimum height of web controls lotharlinux@hotmail.com ASP .Net Web Controls 1 12-04-2006 05:04 PM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
iFrame Javascript Minimum Frame Height Issue chasquad Javascript 0 02-13-2006 03:08 PM
Minimum Height of an Iframe David Morris HTML 1 05-14-2004 10:22 PM



Advertisments