nested div height problem

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 [ Fr, 28 Dezember 2007 20:31 ] [ ID #1895449 ]

Re: nested div height problem

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 [ Fr, 28 Dezember 2007 21:35 ] [ ID #1895452 ]

Re: nested div height problem

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_W [ Fr, 28 Dezember 2007 21:43 ] [ ID #1895453 ]

Re: nested div height problem

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 [ Sa, 29 Dezember 2007 21:47 ] [ ID #1895915 ]

Re: nested div height problem

On 2007-12-29, Bazley <jmp6789 [at] hotmail.com> 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 [ So, 30 Dezember 2007 00:53 ] [ ID #1896310 ]

Re: nested div height problem

But why do the 100% bits not work? I would have thought that a floated
element must know how large its container is.

Bazley [ Mo, 31 Dezember 2007 23:13 ] [ ID #1896899 ]

Re: nested div height problem

On 2007-12-31, Bazley <jmp6789 [at] hotmail.com> 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 [ Mo, 31 Dezember 2007 23:26 ] [ ID #1896900 ]