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
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)