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

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.*

eg 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.