nested div height problem

B

Bazley

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;
}
 
B

Bone Ur

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!!
Click to expand...

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

Bazley

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;
}
 
B

Ben C

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?
Click to expand...

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

Bazley

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

Ben C

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

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.
 

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

Similar Threads

Help with my responsive home page 2
Help with code 0
Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1
Help with Visual Lightbox: Scripts 2
Please Help? 0
Aligned to the left 3
How to position the *tooltip* comment on these buttons? 9

Members online

No members online now.
Total: 56 (members: 1, guests: 55)
Robots: 330

Forum statistics

Threads
473,997
Messages
2,570,239
Members
46,827
Latest member
DMUK_Beginner

Latest Threads

Top