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.
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?
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).
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
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?
Yea, I meant 100% of the browser window.
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).
Thanks @cssgirl and @HugoGiraudel!