Question

Context: This is the output html of a wordpress theme I’m working on.

Everything seemed fine with the layout until I inspected the <div id="foot">(footer), I realized it’s height is the whole page, I was expecting it to be just the size of it’s content.

See it here (code).

Trying to debug the issue, I came upon the realization that if I removed the content of the div or removed the div, it breakes the rest of the desing, why is that?

See it here (code).

I was expecting the footer (<div id="foot">) to be the height of it’s content, this seems to work fine if I add another div after the #foot:

See it here (code).

I’m not sure why removing #foot messes the other content and I’m not sure why #foot is being rendered with a height (to the top of the page).

Answer 1

I understand your question now. You have a float, but the foot div doesn’t clear it.

You need to add…

clear: both;

…or…

clear: left;

…to the #foot CSS to clear that left float above it. Otherwise the content will wrap around your footer.

Here’s an update to your jsFiddle, showing the foot in proper position.

Side note, I believe you haven’t closed all your div elements.