SOLUTION for misbehaving Footer Div's

[Everlongdrummer]

Ok after some time of screwing around I worked out a fix for people who can't get their footer div's to sit correctly under the page content.

Alot of people on the forums including myself have had the problem where the footer div which is placed just before the </body> tag, is appearing up towards the top of the screen, for either firefox and IE or both.

The trick is to clear your floats. When you float something, it will no longer affect the surrounding wrapper div. Here's a simple structure to follow.

<div class="wrapper">
<div class="left_column" style="float:left;">
content goes here
</div>
<div class="right_column" style="float:right;">
content goes here
</div>
<div class="clear" style="clear:both;"></div> <!-- This is the
important part -->
<div class="footer" >
content goes here
</div>
</div>


Adding the "clear" div just before the footer div *should* make it display properly.

Peace.

[MattyUK]

Spot on. You can also use <br clear="all"/>. Personally I don't use a separate div preferring to put the style in the footer itself:

<div class="wrapper">
<div class="left_column" style="float:left;">
content goes here
</div>
<div class="right_column" style="float:right;">
content goes here
</div>
<div class="footer" style="clear:both;">
content goes here
</div>
</div>

Of course since you are using a class you can put that style statement directly in the CSS sheet.

[EJ_DM]

Thanks guys!