Grow your CSS skills. Land your dream job.

Footer Columns

  • # September 18, 2012 at 12:43 pm

    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

    # September 18, 2012 at 1:27 pm

    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?

    # September 18, 2012 at 1:36 pm

    Yea, I meant 100% of the browser window.

    # September 18, 2012 at 1:42 pm

    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).

    # September 18, 2012 at 1:49 pm

    Thanks @cssgirl and @HugoGiraudel!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".