CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

Clearing a Footer

I just finished the very rapid development of a website for a club in Danville, California and due to the time constraints I chose the use absolute positioning for any and all elements I could. After the design was finalized and development was essentially done, the client requested a footer (a perfectly reasonable request), but since I hadn't planned on it from the start and used all absolute positioning, it promised to be a pain in the ass.

In the past, I've used the clearing div, clearfix model and a clearing_div.js file that I first heard of from Andy Clarke (I think). I was thinking that in this situation with absolute positioning, clearing_div.js was my best option unless I wanted to re-develop the entire site css again, which I was not too fond of. So I installed the script, opened up firefox, and expected to see the beauty that is javascript save the day... I, of course, did not. The javascript plopped my footer somewhere in the middle of the page, and if I wasn't so infuriated at the time I would have realized the humor in it.

So I let out a massive sigh, moved on, and tried to come up with a new solution. Which actually turned out quite well, and its very simple to implement. So, enough of that, I'll get right into it.

CSS

body{
font-family:Tahoma, Arial, Helvetica, sans-serif;
position:relative;
width:50em;
margin:0 auto;
border:1px solid #222;
padding:0;
}

div#branding{
position:absolute;
top:0;
left:0;
height:3.6em;
padding:.7em;
width:48.6em;
background:#004696;
z-index:2;
}

div#nav{
position:absolute;
top:5em;
left:0;
width:10.6em;
height:28.6em;
background:#006C96;
padding:.7em;
}

div#content{
position:relative;
padding:5.7em .7em .7em 12.7em;
height:28.6em;
background:#FF830F;
}

div#content-main{
height:5em;
background:#FEBD10;
padding:.7em;
}
div#content_sub{
height:5em;
background:#FFFB0F;
padding:.7em;
}
div#site_info{
clear:both;
height:3.6em;
background:#eee;
padding:.7em;
}

XHTML

<div id="branding"></div><!--branding-->

<div id="content">
<div id="content-main"></div>
<div id="content_sub"></div>
</div><!--content-->
<div id="nav"></div><!--nav-->
<div id="site_info"></div><!--site_info-->

I guess the HTML isn't very helpful to see in this case. There are a few different ways you can construct the css to get this effect, but the magic happens in "div#content" since its positioned relatively it will push the footer (site_info) div down the bottom and still allow you to use absolute positioning on div#content-main and div#content_sub.

Pretty straight forward stuff. I'm in a coffee shop in Raleigh right now, so that's all off the top of my head, when I get home I'll put together a small example of this and link it up so everyone can see it in action.

I'll also look around for that clearing_div.js file and post it... of course I have no idea why i'm typing this when I could just skip it all and upload everything at once....hmmmm. It's probably because I'm just trying to kill the last 7 mins of my lunch break... yea that's probably it. Better get back to work.

I hope this helps ease some frustrations in clearing a footer. Keep in touch.

with_ease,
Tim

here's the example for this article

download clearing_divs.js