Automatic height of DIV containing relative DIVs

DimTim · November 17, 2010

Hi People,

I'm sure this must have come up before but I can't find it despite much searching.

I have a need to put positioned DIVs in a containing DIV and have the containing DIV increase it's size according to the content of the positioned DIVs.

As expected, the containing div collapses and ignores the content of the inner DIVs, is there any way to force the container to expand as needed ?

Here is the code to show what I am doing.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--

#header {
width: 600px;
background-color: #00FFCC;
}
#left {
background-color: #339933;
height: 201px;
width: 141px;
position: absolute;
left: 57px;
top: 10px;
}
#right {
background-color: #FF0000;
width: 200px;
position: absolute;
left: 302px;
top: 7px;
}
#page-content {
clear: both;
background-color: #FFCC33;
width: 600px;
}

-->
</style>
</head>
<body>

<div id="header">

 <div id="left">left</div>

 <div id="right">
 <p>right</p>
 <p>column </p>
 <p>variable content </p>
 </div>
</div>

<div id="page-content">
 <p>This should be clear of the two DIVs in the header</p>
 <p> </p>
 <p> </p>
 <p>sd</p>
 <p> </p>
 <p>sdf</p>
 <p>v</p>
</div>

</body>

</html>

Any help much appreciated.

falkencreative · November 18, 2010

In short, no. At least, not easily. As far as I understand it, if you use position:absolute, it removes those elements completely from the document flow, and you won't be able to enclose/clear those elements properly. It's possible you could hack something together using Javascript to figure out the tallest column and then set the height of #header to that, but it seems an unnecessary amount of work.

Rather, I'd suggest you use floats instead. You can use "overflow:hidden" to ensure that #header contains #left and #right properly, and your clear will then work. You'll need to adjust the positioning on #left/#right using padding or margin, but here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--

#header {
       width: 600px;
       background-color: #00FFCC;
       overflow: hidden;
}
#left {
       background-color: #339933;
       height: 201px;
       width: 141px;
       float: left;
}
#right {
       background-color: #FF0000;
       width: 200px;
       float:right;
}
#page-content {
       clear: both;
       background-color: #FFCC33;
       width: 600px;
}

-->
</style>
</head>
<body>

<div id="header">

 <div id="left">left</div>

 <div id="right">
 <p>right</p>
 <p>column </p>
 <p>variable content </p>
 </div>
</div>

<div id="page-content">
 <p>This should be clear of the two DIVs in the header</p>
 <p> </p>
 <p> </p>
 <p>sd</p>
 <p> </p>
 <p>sdf</p>
 <p>v</p>
</div>

</body>

</html>

DimTim · November 18, 2010

Many thanks Benjamin,

That has confirmed what I was kinda thinking, it also explains why I was unable to find a method despite many hours of searching.

Special thanks for taking the trouble of posting your solution.

Sign In

Automatic height of DIV containing relative DIVs

Recommended Posts

DimTim

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

DimTim

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support