I'm having a pretty common problem with a pretty common layout. I have a container div with a div for a top banner, nav, etc., then some space, then a different div for a footer. I'm doing something stupid with the CSS - I just can't see it.

The container div won't resize to fit text. My research on this indicates that the problem is almost always the use of absolute positioning. But I'm not using absolute positioning anywhere in my code.

Here's the CSS (Yes, I know it's ugly - I'll tidy it up once I'm through messing around with it)

html, body {
background-color:#58341c;
margin:0;
padding:0;
height:100%
}

div#container {
border-left:1px solid #000000;
border-right:1px solid #000000;
width:80%;
min-width:600px;
background-color:#ffffcd;
margin-left: auto;
margin-right: auto;
height:100%;
position:relative
}

div#top {
height:139px;
position:relative;
margin-top:0;
margin-bottom: auto;
background-color:#190003;
background-image:url('top_fader.jpg');
background-repeat:repeat-y;
width:100%;
min-width:600px
}

div#navigation {
height:40px;
background-image:url('navshadow.jpg');
background-repeat:repeat-y;
background-color:#663333;
border-top:1px solid #000000;
border-bottom:1px solid #000000
}

div#center {
width:100%;
background-color:#ffffcd;
min-width:600px;
height:100%;
min-height:200px;
margin:0
}

div#bottom {
height:100px;
position:relative;
margin-bottom:0;
border-bottom:0;
margin-left: auto;
margin-right: auto;
background-color:#ffffcd;
border-top:1px solid #190003;
width:80%;
min-width:600px;
text-align:center
}

Here's the HTML

<div id="container">
<div id="top">
<img src="blah.jpg" style="float:left" />
<div id="space" style="text-align:left; height:99px; width:100%">
<!-- still messing around with this one, hence the inline style -->
</div>

<div id="navigation">
<p class="nav">Navigation</p>
</div>

</div>

<p style="text-align:left">text</p>

</div>

<div id="bottom">
</div>

I'm looking at it with Firefox/Chrome on Ubuntu 10.04. It looks okay until you try to add more text at the bottom of div#container. The text overflows that div, goes behind div#bottom, and continues on.

You tell it to be 100% and that's what it will be!

100% of the parent container.

Yeah, I saw that about half an hour after I posted this. It's always shortly after I ask a dumb question that I spot the error myself.

Well, we all have those doh.gif moments.