Latest Posts

 

Archives

 

We recommend

 

 

FreeAgent sign-up

No-nonsense sticky footers

Absolute positioning. It used to be all the rage back when we never had any problems with full-height columns because we could all use tables for layout, guilt-free. Ahh, those were the days.

These days fixed positioning is all the rage even though it doesn’t work on 90% of browsers, but, hey, we don’t care about that any more because we’re accessibility-compliant and we’re gracefully (and oxymoronically) degrading our sites or even, if we’re really of the Zeitgeist, progressively enhancing them. Honest.

But I’m not here to philosophise about the moral issues surrounding onclick(). I’m here merely to point out the CSS which might, just might (sorry, IE4 fans), allow you to put a big fat sticky footer on your website.

Firstly I’m assuming you’re using the common HTML ‘wrapper’ template:

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

The first step is to apply height: 100% to the body and wrapper elements, and give the wrapper min-height: 100% and height: auto:

html, body { height: 100%;}
 
#wrapper {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;   /* cunning IE hack */
}

Next, we absolutely position the footer at the bottom which, combined with the relative positioning of the wrapper, sticks it to the bottom of the page:

position: absolute;
bottom: 0 !important;
bottom: -1px;  /* thanks IE */

You’ll probably want to apply a height to the footer div and add an equal size to the content div using padding-bottom. This will prevent any content from being hidden behind the footer.

And that as, they say, is that. Absolutely marvellous.

See the footer in action.

Tested in IE 5.01, IE 5.5, IE 6 and Firefox on the PC. Firefox, Opera, Camino and Safari on the Mac.

Posted by Olly on March 26, 2007 at 5:29 pm in css
Comments (1) | Permalink

I say, what is this Britpack and what do they want?

Malarkey wrote about The Britpack recently and I spent way too long posting a response. This post is a regurgitation of said comment for my legions of readers.

~

The Britpack: The Masons of web design ;-)

*nudge nudge, wink wink*

I’ve always thought the Britpack thing was a little eccentric, very British, and only a little exclusive. But I don’t think exclusivity is a bad thing, at least not in this case. It’s just a bunch of mates working in the same area having a bit of a lark.

But the Britpack has come to mean more than that to many. After countless books and worldwide speaking agendas by Britpack members (fnar), the Britpack logo has become a stamp of authenticity, a badge of honour, a symbol of skill.

These days there are are loads of amazing, standards-compliant, British, web-designing bloggers out there who don’t proudly ‘boast the briefs’, and they probably feel left out. If you’re that good, where are your Brit pants, eh?

So what do you do? You have three choices. You either bin the Britpack (’burn the pants, burn them!’), keep it, or change it.

Binning it would be daft. They’re great pants.

Keeping it the same is only going to cause you more of this grief.

Changing it, therefore, is the only way. Give the pants a touch of Blairite reformation and start handing out a pair to every righteous British subject. Tally-ho chaps!

You shouldn’t need to invent the one true layout to be invited, or have to put your face about at the right conferences (trust me, it’s an expensive habit for lowly freelancers), you just need to have passion, dedication and devotion for the web, standards, and all that malarkey.

Oh, and you need to be British.

And you have to like cheese.

Posted by Olly on March 20, 2007 at 10:26 pm in britpack, uk, web
Comments Off | Permalink