Camen Design Forum

footer positioning

append delete Jan Petersen


First off, congrats on the web site. It is truly a study in clean, lean page code.

I've tried to understand the way the footer is positioned. It looks like a variant of the popular wrapper based method, with the article tag taking the place of the wrapper.

I was wondering if anyone has experience with Jeffrey Way' solution of fixed positioning?

Looks pretty promising (and simple) to me.
footer {

I had to add the box-sizing: border-box; option ( and the equivalent Moz. and Gecko variants for content within the footer to position correctly.
But in limited testing - it looks promising.

Reply RSS


append delete #1. JJ

I don't really understand what you're asking here. Try not to use width: 100%; on fixed boxes. Stretching the box with left:0 and right:0 is usually a better option.

append delete #2. Jan Petersen


Good point about the width - I'll make that adjustment - thanks for the feedback.

The question was actually more about the vertical position of the footer.

The method outlined above, use a fixed position, combined with bottom: 0px. This creates the equivalent of a floating footer toolbar or status bar at the bottom of the screen.

But I've noticed that the way this is implement on Camen' page is more complex, and is done by setting article height to 100% and setting padding-bottom to clear room for the footer, then setting the footer to a negative margin the same size as the height of the footer.

What I am curious about is, that using a fixed position and bottom:0px appears be an easier way of achieving the same thing. This new way would also not require the content (or article) to have higth set to 100%.

Since I know that Camen has spend a lot of time optimizing the code, I'm pretty certain it is for good reason he has gone with the method he did.

So I'm wondering if, someone have experience with this simpler method?

append delete #3. Kroc

The article height is nothing to do with the fixed navigation at the bottom. (NB: the fixed navigation is the website’s *header*).

The article munging is used to fix the footer (the source code links below articles) in such a way that it does the following:

* If the article is shorter than the viewport height, then the footer appears at the bottom of the viewport (but above the fixed header)

* If the article is longer than the viewport, than the footer appears at the bottom of the article, but with enough room to scroll clear of the fixed header.

It is more complicated to implement than it seems. Search for "fixed footer" in the CSS to see the individual parts of it.

append delete #4. Jan Petersen

Thanks Kroc

I knew you had a good reason for building it the way you did. ;-)

I'm thinking I might be able to take a simpler route, since I won't have an article footer. The design I'm working on just has a single page footer.

Impressive site you've build though. Clearly worthy of reference material.

Thanks for letting us look over your shoulder see the inner workings.

Best Regards
Jan Petersen


(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn