Why doesn't dynamically generated content change the height of containing div? - css

Question

I am writing a footer div that displays info from the database. The footer has a different background color than the rest of the page, and will have a height that depends on how much content the database throws to it. When I generate the content with php and call for a border around the footer div, the content appears and is, let's say, 400px high, but the div border appears as a 1px high rectangle at the top of the div.
How do I get the height to auto-fit the content?
<div id="footer">
<?php
$an_array=array();
$tasks=mysql_query("select stuff from the db");
while($row=mysql_fetch_assoc($tasks)){
extract($taskrow);
$an_array[]=$task;
}
$an_array=array_chunk($an_array,4);
foreach($an_array as $dtkey=>$dtval){
echo "<dl>";
foreach($dtval as $dtvkey=>$dtvval){
echo "<dt>".$dtvval."</dt>";
}
echo "</dl>";
}
?>
</div>
This is what I get. The area below the red border should be filled with a color.
border image http://www.kevtrout.com/tortus/div.png
By popular demand, here is the css:
#footer{
border-top: 10px solid #d8d8d8;
background:#5b5b5b;
/*overflow:auto;*///Added this after seeing your answers, it worked
}
dl.tr{
width: 255px;
height:160px;
background: #5b5b5b;
margin:0px;
float:left;
padding: 10px;
}
dt.tr{
font-weight: normal;
font-size: 14px;
color: #d8d8d8;
line-height: 28px;
}
edit: I am using firefox on a mac

Answer 1

Check your footer CSS... if you have overflow set to anything but auto/scroll, then the DIV won't grow.
If not try using something other than DL/DT since DT's are inline elements, they won't push your div to fit content.*
e.g. just try using a DIV instead, if the footer grows, you have your answer.
(note: I revised order of suggestions)
*(I realize spec-wise, that this Shouldn't be an issue, but there wasn't an indication of which browsers this was occuring in, thus I would not be at all surprised if IE was rendering differently than expected for example)

Answer 2

Without seeing the CSS, my guess would be that your <dl>s are floated to get them side-by-side. The containing <div> then won't expand to contain them. If this is the case adding a clear:both; before the final </div> should fix it, like this:
<div style='clear:both;'></div>

Answer 3

The browser doesn't care if your content is generated by PHP or comes from a static HTML file.
The issue will most likely be in your CSS. Either the content you put in the footer has positioning properties (like float:left or position:absolute) that place them "outside" the div or the div has a fixed size and/or overflow properties set.
I'd suggest posting your CSS file here or (if it's too large) put it up somewhere where we can take a look. The finished HTML (you could just save a static copy of the output if your system isn't online yet) wouldn't hurt either.

Answer 4

By the way, your use of the <dl> element is wrong: you are missing the <dd> element. Items in the definition list always consist of one definition term and one or more definitions (which, in your code, are missing).
Also, rather than using <div style='clear:both;'></div> as suggested by Steve, I'd suggest explicitly stating the height of your <dt> elements. This way, the floats don't have to be cleared.