Forum Moderators: not2easy
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> <!-- main_content -->
</div> <!-- main_page -->
</div> <!-- main_box -->
</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.
[edited by: JohannesFoop2 at 4:14 am (utc) on June 24, 2007]
