Getting multiple nested <div>s to dynamically resize their heights

Hi everyone, I've been having some problems with a web page I was designing. Basically what I want is a good method for having external <div>s mold to fit the height of the <div>s they contain. I can get this to work if there's only one external layer, but with two external layers I'm having bizarre problems. Is there any way to get this working right? Read on for my code, then a quick briefing on what's happening.

mockup.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="mockup.css" type="text/css">
</head>
<body>
<div id="main_box">
<div id="main_page">
<div id="content_tag">
Content tag
</div>
<div id="main_content">
Most<br />of<br />the<br />content<br />is<br />placed<br />here.
</div> 
</div> 
</div> 
</body>
</html>

mockup.css:

*
{
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
font: 12.5px arial;
color: black;
}
html
{
background-color: orange;
}
#main_box
{
position: absolute;
margin: 10px 0px 0px 10px;
width: 650;
background-color: lime;
}
#main_page
{
position: relative;
margin: 5px 0px 0px 5px;
width: 630;
background-color: purple;
}
#content_tag
{
position: absolute;
z-index: 1;
left: 300;
top: 0;
padding: 2px 2px 2px 2px;
background-color: gray;
}
#main_content
{
position: relative;
left: 0;
top: 0;
margin: 0px 0px 0px 0px; /*Adding a top margin here moves "content_tag" as well!*/
width: 610;
height: 100%;
background-color: blue;
}

Legend:
-------
"html"..........orange
"main_box"......lime
"main_page".....purple (the right edge is advanced a few pixels so you can see where it's laid out)
"main_content"..blue

As you can see from the code, the setup is that I have two nested external rectangles, "main_box" and "main_page", and inside "main_page", the adjacent "content_tag" (just an offset piece of information) and "main_content".

What I want is for the two external layers to change their heights dynamically to fit exactly howevermuch text is inside "main_content" -- all three should have the same heights always. There are a lot of images, backgrounds and positioning that make this complexity necessary, but which I've left out for simplicity's sake.

This seems to only work if "main_content" is 'relative'. This makes "main_page"'s height change to fit the text, but "main_box" and its unset height automatically revert to 0. Making "main_page" relative as well fixes that. At this point I wanted to push "main_page" 5 pixels down and right from its normal position. For some reason only margins work for that, otherwise, say if I use 'top' and 'left' to do it, "main_box" won't stretch down to accomodate the newly created space. I'm not sure why that happens, which I why I mentioned it, but that works.

What I've described so far is the state the code I've given you is in. But now what I want is for "main_content", and not "content_tag", to be pushed down 20 pixels. However, adding a top margin to "main_content" pushes both it and everything else within "main_page" down with it! And that's the problem I'm having. This seems to be because of some side effect of having "main_page" set to 'relative', but I've tried a lot of experimentation and I'm still not sure how to fix it. Oddly enough, only a top margin seems to do this -- a left margin, for example, only moves "main_content".

So to sum up, what I want is for the three "main_"s to all have the same heights based on how much text is in "main_content", and at the same time for it allow me to be able to adjust "main_content"'s margins without affecting "content_tag". Thanks in advance, any help would be great.

Getting multiple nested <div>s to dynamically resize their heights

I can get it to work, but bizarre margin errors occur

JohannesFoop2

JohannesFoop2

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week