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

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

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 3

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 so, adding a

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

before the final </div> should fix it.

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.