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

Question

I am writing a footer that displays information from a 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 create content with php and get called for the frame around the footer div, the content appears and, say, 400px is tall, but the div border is displayed as a 1px-tall rectangle at the top of the div.

How to get height for automatically setting 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 under the red frame should be filled with color. border image http://www.kevtrout.com/tortus/div.png

By popular request, 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 mac

Answer 1

CSS... , /, DIV .

- , DL/DT, DT , div . *

. DIV , , .

(: )

* ( , , , , IE , , )

Answer 2

CSS, , <dl> , . <div> , . , clear:both;, </div> , :

<div style='clear:both;'></div>

Answer 3

, PHP HTML.

, , CSS. , , (, float: left position: absolute), "" div div / .

CSS ( ) -, . HTML ( , ) .

Answer 4

By the way, using an element <dl>is wrong: you are missing an element <dd>. Elements in a definition list always consist of one definition term and one or more definitions (which are not in your code).

Also, instead of using <div style='clear:both;'></div>, as Steve suggested, I would suggest explicitly specifying the height of your elements <dt>. Thus, floats do not need to be cleaned.