[fubofo]

Hey guys, first post here so I'll also take the time to say hi!

OK so I'm having a bit of bother getting a page layed out correctly. I'm having problems with my footer. I want it displayed at the bottom of my screen within a min-height container. (this is OK I have it stup perfectly on a few pages).

The problem I am running into is on a few pages where I have a div that is floated left. For some reason my footer displays over the top of the float:left and clear:both does nothing. This is really starting to frustrate me, so I'm asking for a little help (a fresh pairs of eyes is always great).

The problem can best be viewed at http://www.mytilesandbaths.co.uk/shop (try clicking on a few categories to see what happens).

Any help would be greatly appreciated!

[andyl]

You shouldn't really use position:absolute really (excluding overlaying divs/images, such as 'change picture' on Facebook profiles for example), since it will cause overlay. Once your footer is not positioned 'absolute', the clear fix will work.

To keep your footer at the bottom, use a sticky footer - see this one for an example.

[ayoungh]

andyl, on 10 September 2010 - 04:17 PM, said:

You shouldn't really use position:absolute really (excluding overlaying divs/images, such as 'change picture' on Facebook profiles for example), since it will cause overlay. Once your footer is not positioned 'absolute', the clear fix will work.

To keep your footer at the bottom, use a sticky footer - see this one for an example.

Nice example +1

[fubofo]

Thanks for the reply guys. I have managed to resolve the issue myself after taking a break and having a beer lol. Thanks for the link, I am already aware of that layout but it didn't seem to work on the site.

Anyways I have now got it working exactly how I wanted with some padding-bottom and margin-bottom. Not exactly the best way but it works lol