Footer Columns

[alex_wilson]

I’m trying to create three columns in my footer with a combined width of 960px, while keeping the footer at 100%, so that the footer background color stretches across the page. I’ve looked around the web for 3 column footer tutorials, but haven’t found any good ones. Any help would be appreciated.

http://codepen.io/anon/full/reAKJ

[cssgirl]

Is your footer supposed to be 100% of the browser window, or 100% of the 960px?

If you want the footer background to expand 100% of the browser window you can set the footer width to 100%, then within that use a containing div with a fixed width of 960px and margins set to margin:0 auto; to center the content within. And then you could use 3 unordered lists, floated, within your footer with a specific width or percentage taking in consideration for margins in between each item?

[alex_wilson]

Yea, I meant 100% of the browser window.

[Kitty Giraudel]

You forgot to close a brace on your CodePen example. That’s why the footer looks weird.

To answer your question: set a size to the #footer (like 960px), then set columns width in %. Like 33% or something.

I use a 3 columns footer on Wild Web Watch. They don’t have the same width but whatever: if you resize the browser, it’s still 3 columns (until you reach the media-query triggering the single column layout).

[alex_wilson]

Thanks @cssgirl and @HugoGiraudel!

[Author]

Posts