Home › Forums › CSS › Footer Problems › Re: Footer Problems
You need to clear the floats. Like this
.clear { clear: both; }
then in your html. use it like this
<div class="clear"></div>
put that ater you float any content.
What happens is that if your content is shorter than your sidebar, the footer moves up under the content area because there is room for it to fit. If the content is longer than the sidebar, the reverse happens. If you clear the float, then that tells the div to make sure nothing is on the left or right of the div. that pushes the footer back into the position you intended for it to be in. You can do clear:right; clear:left; or clear:both;
To experiment with this. make a simple content area, sidebar and footer. Make one longer than the other, use a background color so you can see the areas and see how the footer reacts. Throw in a div to clear the floats just before the footer and see what happens.
I already have a DIV with a class of float and that does fix the problem.Here is what I am talking about, see how there is a space between the main content and the footer. I have tested it in Firefox, I.E., Safari, Chrome and Opera and the same problem always occurs.
[attachment=0]screencap.jpg[/attachment]