nested div height problem

Discussion in 'HTML' started by Bazley, Dec 28, 2007.

  1. Bazley

    Bazley Guest

    I have a div ("inner") nested inside another div ("outer"). The min-
    height only is set for both, so height: auto; is set by default. When
    I fill the inner div up with content and its height grows larger than
    the height of the outer div, the outer div does not realize and
    remains at its min-height. I want the outer div to adjust
    automatically to height of the inner div. Please help!!

    HTML source:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-translational.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="mysite.css" />
    </head>

    <body>
    <div id="main">
    <div id="outer">
    <div id="inner">

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
    </div>
    </div>
    </div>
    </body>
    </html>



    CSS source:

    html, body, main, outer, inner {
    margin: 0;
    padding: 0;
    border: 0;
    }
    html {
    height: 100%;
    }
    body {
    background-color: black;
    height: 100%;
    }
    #main {
    position: relative;
    margin: auto;
    width: 900px;
    min-height: 700px;
    background-color: yellow;
    }
    #outer {
    position: absolute;
    left: 0px;
    top: 150px;
    width: 900px;
    min-height: 200px;
    background-color: cyan;
    }
    #inner {
    position: absolute;
    left: 150px;
    top: 0px;
    width: 600px;
    min-height: 100px;
    background-color: green;
    }
     
    Bazley, Dec 28, 2007
    #1
    1. Advertising

  2. Bazley

    Bone Ur Guest

    Well bust mah britches and call me cheeky, on Fri, 28 Dec 2007 19:31:27
    GMT Bazley scribed:

    > I have a div ("inner") nested inside another div ("outer"). The min-
    > height only is set for both, so height: auto; is set by default. When
    > I fill the inner div up with content and its height grows larger than
    > the height of the outer div, the outer div does not realize and
    > remains at its min-height. I want the outer div to adjust
    > automatically to height of the inner div. Please help!!


    Won't happen. The inner div is positioned absolutely.

    > #inner {
    > position: absolute;


    --
    Bone Ur
    Cavemen have formidable pheromones.
     
    Bone Ur, Dec 28, 2007
    #2
    1. Advertising

  3. Bazley schreef:
    [snipped]

    >
    > HTML source:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-translational.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    >


    Translational ????????


    --
    Rob
     
    Rob Waaijenberg, Dec 28, 2007
    #3
  4. Bazley

    Bazley Guest

    Aha! I see. Thank you Bone chap. But now I have a new problem. In fact
    there are two things not working: (see new code at bottom)

    1) The surround div (green) responds correctly to the two expanding
    column divs contained within (yellow and cyan). But the main div
    (black) does not respond to the expanding surround div. Instead it
    just stays put at its min-height setting of 450px. Why does the main
    div not expand too to keep up with the surround div?

    2) None of the height: 100%; settings are working. I would have
    thought the two column divs should always expand to be the same height
    as the surround div, and the surround div should always expand to be
    the same height as the main div. Why is it not doing this?

    HTML source:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="mysite.css" />
    </head>
    <body>
    <div id="main">

    <div id="surround">

    <div id="left_column">

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help
    </div>

    <div id="right_column">
    help<br>help<br>help<br>help<br>help<br>
    </div>

    </div>

    </div>
    </body>
    </html>


    CSS source:

    html, body, main, surround, left_column, right_column {
    margin: 0;
    padding: 0;
    border: 0;
    }

    html {
    height: 100%;
    }

    body {
    height: 100%;
    background-color: gray;
    }

    #main {
    position: relative;
    margin: auto;
    top: 15px;
    width: 900px;
    min-height: 450px;
    background-color: black;
    }

    #surround {
    float: left;
    width: 800px;
    height: 100%;
    background-color: green;
    }

    #left_column {
    float: left;
    width: 40%;
    height: 100%;
    background-color: yellow;
    }

    #right_column {
    float: right;
    width: 40%;
    height: 100%;
    background-color: cyan;
    }
     
    Bazley, Dec 29, 2007
    #4
  5. Bazley

    Ben C Guest

    On 2007-12-29, Bazley <> wrote:
    > Aha! I see. Thank you Bone chap. But now I have a new problem. In fact
    > there are two things not working: (see new code at bottom)
    >
    > 1) The surround div (green) responds correctly to the two expanding
    > column divs contained within (yellow and cyan). But the main div
    > (black) does not respond to the expanding surround div. Instead it
    > just stays put at its min-height setting of 450px. Why does the main
    > div not expand too to keep up with the surround div?
    >
    > 2) None of the height: 100%; settings are working. I would have
    > thought the two column divs should always expand to be the same height
    > as the surround div, and the surround div should always expand to be
    > the same height as the main div. Why is it not doing this?


    It's because all it's got in it are floats. Floats don't cause their
    container to expand in height. This is correct behaviour.

    Make the container overflow: hidden. That might not work in IE, but on
    certain days of the week IE incorrectly calculates heights the way you
    wanted them originally anyway.

    Otherwise, put a <div style="clear:both"></div> in after the floats.
     
    Ben C, Dec 29, 2007
    #5
  6. Bazley

    Bazley Guest

    But why do the 100% bits not work? I would have thought that a floated
    element must know how large its container is.
     
    Bazley, Dec 31, 2007
    #6
  7. Bazley

    Ben C Guest

    On 2007-12-31, Bazley <> wrote:
    > But why do the 100% bits not work? I would have thought that a floated
    > element must know how large its container is.


    Why? It knows how wide it is, not how high.

    The container's height depends on the float, not directly (unless you've
    got clearing etc.), but it affects how the text wraps, and that affects
    the height. So to allow a float to be a percentage height of an auto
    height container creates a circularity, and CSS 2.1 explicitly says that
    in that situation the percentage height is treated as auto.
     
    Ben C, Dec 31, 2007
    #7
    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. Kyle James Matthews

    div with nested links has no height?

    Kyle James Matthews, Jun 4, 2004, in forum: HTML
    Replies:
    7
    Views:
    1,471
  2. HJ
    Replies:
    5
    Views:
    899
    Jonathan N. Little
    Sep 1, 2006
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    891
    muggslab
    Feb 1, 2010
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    170
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    139
Loading...

Share This Page