minimum height for a layout

Discussion in 'HTML' started by Mark, Nov 28, 2007.

  1. Mark

    Mark Guest

    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?
     
    Mark, Nov 28, 2007
    #1
    1. Advertising

  2. Mark

    rf Guest

    "Mark" <> wrote in message
    news:...

    > 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.
     
    rf, Nov 28, 2007
    #2
    1. Advertising

  3. Mark

    richard Guest

    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.
     
    richard, Nov 28, 2007
    #3
  4. Mark

    Andy Dingley Guest

    On 28 Nov, 10:12, Mark <> 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/
     
    Andy Dingley, Nov 28, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Morris

    Minimum Height of an Iframe

    David Morris, May 14, 2004, in forum: HTML
    Replies:
    1
    Views:
    4,970
    David Dorward
    May 14, 2004
  2. Replies:
    1
    Views:
    587
    John Timney \(MVP\)
    Jun 19, 2006
  3. Marcin Rze¼nicki

    Minimum form size with grid bag layout

    Marcin Rze¼nicki, Oct 25, 2009, in forum: Java
    Replies:
    6
    Views:
    524
    Knute Johnson
    Oct 26, 2009
  4. Minimum height of web controls

    , Nov 25, 2006, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    101
    lotharlinux
    Dec 4, 2006
  5. chasquad
    Replies:
    0
    Views:
    101
    chasquad
    Feb 13, 2006
Loading...

Share This Page