Full browser width footer
 

I have seen some posts where someone wanted to have their footer extend to the edges of their browser, even if the body width is smaller.

I wanted to share a pretty quick and easy way to accomplish this.

Make a single pixel gif that is the same color of your footer and upload it to your site.

Go to the AT Options "HTML Inserts: Body Bottom" and add the following...

This will place a filled in div below the footer that is the height of your footer.

The negative margin-top will pull it up even with the top of your footer. You may need to play with the height and margin a little to avoid running into the bottom of a sidebar.

The position and z-index will assure that the div block shows *under* your footer.

Hope that this can help someone!

Ken
The Web Mechanic

This is a great tip, thanks for sharing - but I can't get it to align well in Internet Explorer while it does in other browsers.

And while I'm typing something, I would just like to take this opportunity to declare my utter hatred for Internet Explorer. It always makes web design a pain in the you know what.

Yeah... it can be a bit snarky... You may well need to change the height or the positioning 1px at a time to get it right..

Well, it aligns perfectly in Firefox, Chrome and Safari. If I change the height to get it right for Internet Explorer, it's going to mess things up in the other browers. You got it to align well in all these browsers?

It's looked ok to me! Here's the url I used this on.

www.jutehome.com

Let me know!

Ken

I got it to work! I had the Stacounter plugin turned on which puts some invisible code in the footer but it was causing Internet Explorer to create an extra vertical space in there and that's why the code you supplied didn't seem to align properly in IE.

Thank you again for this tip it works very well!

And btw, that's a nice site you made there.

JFG