footer placement nightmare
November 27, 2008 6:20 AM   Subscribe

Ongoing web design saga... positioning a footer, I know MetaFilter can save me!

This is connected to my previous question about professional looking websites. I have started a redesign, and the mockup / prototype is close to complete. I have hit a roadblock with the bloody footer.

I am thinking what I have so far cannot be saved and I might need to start from scratch, but really hope that isn't the case.

The problem is that the main page content div uses absolute positioning, so it seems impossible to get the footer to gracefully slip underneath the bottom of the content. Things I have tried based on examples on the web end up breaking the page... I think maybe my css is a little too Frankenstinian, with mix of absolute and relative positioning, floats within divs, etc. It seems I make any change and it all goes to shit. What I have now looks exactly correct in FF and IE, after much sweat and tears, so starting again makes me want to cry... but without a footer it just is not what I need.

If someone could give me a simple fix to get the footer positioned below the "copy" div I would be so super appreciative. The html and css has a lot of comments to help understand what bits are what.

online demo of page
css for the page
posted by Meatbomb to Computers & Internet (11 answers total) 3 users marked this as a favorite
 
I'm not experienced enough with writing code to apply specifics to your situation, unfortunately. I use Ryan Fait's CSS Sticky Footer method.
posted by bonobo at 7:05 AM on November 27, 2008 [1 favorite]


I don't have a specific 'tweak this and you're done answer', but a suggestion to rethink how you look at a page.

Consider all the sections of a web page (header, menu, main content, footer) as a stack of dishes.

Wrap the entire stack in a wrapper div, and then make a div for each layer.

Each layer div should be relative positioned - what you do inside each div is up to you. (abs or rel of objects inside the div)

If you want a sidebar/content split in the main area, float each left or right as needed.

Footer always gets a clear.both css setting, and will fall to the bottom (below longest content).

Works every time for me.

Purists will scream, I am sure, in that I just described a table-less table layout.

To make things more flexible, you can always break all the layers into inc(lude) files and use PHP to build your web page parts (layers) into a coherent whole (and not repeat common code across pages). But that's another post...
posted by MTCreations at 7:41 AM on November 27, 2008 [3 favorites]


Purists will scream, I am sure, in that I just described a table-less table layout.

Not at all, I think it's perfect.

Meatbomb, your html doesn't validate. Sometimes I spend hours fighting with a design when I realize it doesn't validate. I fix it and everything works. I don't think it will be your case, as your page has only small problems, but it's something to consider for future cases.

I don't think you need #whitestripe and #greenstripe. You could get rid ot them and use a top positioned background image instead (you can use this one, use repeat-x). What you did is not wrong, but its much more complicated.

Your problem is caused by the absolute positioning in the main elements. There's no reason to use it everywhere, I'd use it only for the logo. MTCreations has excellent advice, your elements should stack one over the other. This site explains the differences between flow (the stacking) and positioning.

Something many people don't know is that you can use absolute position inside a relatively positioned element. You don't have to position elements relative to the browser window. There's more information here.

Hope this helps!
posted by clearlydemon at 9:41 AM on November 27, 2008 [1 favorite]


Here's a diagram of how I'd create the layout for that particular page.
I guess I'm avoiding my own work, if you haven't noticed.

I'd only use absolute position for the logo and maybe for the language thingy (you could also use float:right for that).
posted by clearlydemon at 9:49 AM on November 27, 2008


clearlydemon: the problem is I want these three things:

1) fixed width
2) centered on page
3) footer with a stripe across the bottom, like the top.

In your diagram, yes I could build exactly that with floats, but how to make all content 900 px, in the middle of the page, but with the two stripes top and stripe in footer spreading across the full width? This is what is tormenting me.
posted by Meatbomb at 11:45 AM on November 27, 2008


(and yes, you have a better solution with the bg image for the two top stripes... but how about the footer?)
posted by Meatbomb at 11:46 AM on November 27, 2008


“(and yes, you have a better solution with the bg image for the two top stripes... but how about the footer?)”^
Have a look at the CSS for this page and notice how a small graphic is repeated across the top of the footer for the border effect.
posted by bonobo at 12:13 PM on November 27, 2008


meatbomb:

Fortunately, it is very, very easy to give something fixed width and make it centered. Here is what you do:

.content {
width:800px;
margin: 0 auto;
}

That tells the browser "i want 0 margin on the top and bottom of my content, and I want you to figure out the left and right ones for me, so it's centered on the page horizontally."

(obviously you can change that 0 to "10px" or whatever to give yourself spacing above/below the content)

You don't need to use absolute positioning. Hell, I just used Firebug to give your content div "margin: 80px auto" and it looked relatively perfect. Shouldn't have needed 80px, but I guess you've got other stuff that's absolutely positioned.

and i guess if you're a cool kid you should use ems instead of px, but you know, one thing at a time :)
posted by ewingpatriarch at 12:24 PM on November 27, 2008


Played around with Firebug a little bit more: with a little bit of work, you could also remove your absolute positioning in most of the header elements, too, but I guess it's not necessary to do that if it's working for you already. Nice design, btw, I like the header a lot.
posted by ewingpatriarch at 12:32 PM on November 27, 2008


In your diagram, yes I could build exactly that with floats, but how to make all content 900 px, in the middle of the page, but with the two stripes top and stripe in footer spreading across the full width? This is what is tormenting me.

I'd put it outside the container and make it a full width div, like the ones you have for the header. Then, I'd put inside another div with the fixed width and margin: 0 auto, as ewingpatriarch mentioned (if you only have one element, like a list or a paragraph, you could directly assign the size and margin to it and avoid using an extra div).
You could still have the headers with 100% widths too, if you want.

You'd need a trick like FooterStickAlt to make it stick to the bottom.
posted by clearlydemon at 2:45 PM on November 27, 2008


(One more post, in case I didn't fully answer your question before: Removing the "position:absolute" from your content will put the content back into the flow. Applying the 80px top and bottom margins to the content will give it adequate spacing to allow room for language selection and space before the footer (alternatively, just give it margin: 80px auto 0 if you want there to be no space between the content and footer). At that point, you can safely close whichever container div is enforcing the fixed-width constraint, and then after that you can put your footer, which will now come after the content, sit below it, and be able to stretch the whole screen if you apply width:100% to it.)

<3
posted by ewingpatriarch at 10:35 PM on November 27, 2008


« Older Appropriate thank-you gift in India?   |   Wanted: Research on how illustrations influence... Newer »
This thread is closed to new comments.