Sep 12 2008

Pin Your Footers The CSS Way

Category: Programming, Tutorials — stephen @ 7:59 am

I have been using a new CSS tech­nique for cre­at­ing fixed foot­ers – that is, foot­ers which pin them­selves to the bot­tom of the browser win­dow – with­out using JavaScript. Head­scape designer Ed Mer­ritt is the one who came up with the idea, and like most ele­gant solu­tions, this one is so sim­ple that I wish I’d thought of it. It really works.

Assum­ing your basic HTML lay­out markup looks like below:

1
2
3
4

<div id="container">
  <div id="content"></div>
  <div id="footer"></div>
</div>

… you can use the fol­low­ing CSS exam­ple to pin your footer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#container {
  position:absolute;
  min-height:100%;
}
 
#content {
  margin-bottom:100px; /* same as footer height */
}
 
#footer {
  position:absolute;
  bottom:0;
  height:100px; /* same as content margin-bottom */
}

So, hack away. It’s not suit­able for every design, of course, but it just might help you get rid of that annoy­ing white­space below your footer, for instance on a content-starved page which ends up far short of the win­dow height.

Tags:

Jun 20 2008

ALA: Faux Absolute Positioning

Category: Programming — stephen @ 8:20 am

One of my favorite web pub­li­ca­tions, A List Apart, has pushed an arti­cle about a new CSS lay­out tech­nique that the author, Eric Sol, calls Faux Absolute Posi­tion­ing. Up until now, I’d always relied pri­mar­ily on float­ing divs. Other folks pre­ferred using (real) absolute posi­tion­ing, but that required the use of JavaScript to keep the footer from smoosh­ing things.

For grid­tas­tic designs, this new tech­nique appears to be the best answer CSS has to offer yet. The ben­e­fits of absolute posi­tion­ing, but using rel­a­tive posi­tion­ing + neg­a­tive mar­gins so as not to break the lay­out. I plan to try this out on future sites I work on, so I with­hold final judg­ment, but as things look right now, Eric Sol will end up as my new CSS rock­star hero.

Tags: , ,