Lowter

Absolute Clearance

Published on the 12th of March 2005

By Ethan Poole

A problem that many people face is trying to make a footer when using absolute positioning in the design. The simplest fix is to use floats as you're able to clear the footer, but this isn't available in absolute positioning. One advantage of using absolute positioning though is that you can place your page elements in any order on the page, usually with the content first.

The ideal median is being able to place your content first and have a way to clear for a footer. There are two hacks or workarounds to this - absolute clearance and negative margins.

Absolute Clearance

Shaun Inman developed a way for absolute clearance using JavaScript. The only downside is it can slow the page time and won't work when JavaScript is turned off in the browser. This method is the most easily adaptable to your situation. You can find the code at his website (external link).

Negative Margins

Ryan Brill introduces us to negative margins at A List Apart (external link). This method uses floats, but allows you to place the floats with the content first using a negative margin CSS tricks. I haven't personally tried this method yet, but it seems to be more practical.

What we should hope for is an easy CSS absolute clearance method with the coming CSS3.

Opera 9. Innovation delivered. Download Now (external link)