[SOLVED] footer positioning

[danny322]

morning/evening people!

can someone have a look at this page.....

http://www.design365.co.uk/sef/test.htm

im having problems positioning the footer, i need it to go all along the very bottom of the page like the banner does at the top

EDIT: its working in IE but not FF

[MikeHopley]

Try this:

Code: Select all

#footer{
clear: both;
background-image: url(images/footer.gif);
height: 60px;
background-repeat: repeat-x;
margin-bottom: 0;
padding-bottom: 0;
}

[danny322]

haha cheers mike! what does clear: both; do then?

[MikeHopley]

Originally Posted by danny322

haha cheers mike! what does clear: both; do then?

It's all about floats.

In your CSS, whenever you write "float: left" or "float: right", you fundamentally change the layout properties of that element. Read about floats here.

Non-floated items may appear above floats, despite being "beneath" them in the source code. "clear: both" fixes this, by explicitly commanding the item to position itself beneath any floats that come before it in the source. This is like drawing a line under your floats.

"clear: left" is the same, but only takes notice of left-floated boxes. Similarly, "clear: right". Most of the time you just want "clear: both". Sometimes you want to clear floats, but you lack an appropriate element to "hook" the clearing onto; in this case, just use an empty <div class="clear"></div> (and apply the CSS "clear: both" to this class).

Note that you cannot use "float: left" (or right) together with "position: relative" (or absolute, or static, or fixed). Floating is a fundamentally different layout method from positioning; it's impossible to create a positioned float. If you do specify both, I believe the positioning takes precedence.