How to do a Basic 3-Column Footer

December 26th 2009 / 2 minutes to read

osnqa

The first question I am answering (from the blog entry, Q&A: WordPress, Blogging, and More), comes from Dayze. The question is as follows:

I really like the layout of your site; it’s simple but pretty :) I’m always finding alternate ways to make a 3-columned footer so I hope you can share

Now you can do this one of two ways. The first would be using floats to just float each column next to each other (which is what I will be sharing), or what I am currently using is absolute positioning (granted I have room for a 4th column but not sure what I want down there yet).

Float Method

Add this code to your CSS (cascading style sheet):

.floatleft {float: left; margin: 0 20px 0 0; width: 200px;}
.clear {clear:both}

Add this code to your footer:

<div class="floatleft">
<h3>Heading</h3>
All sorts of awesome footer goodness
</div>

Of course you can change the width, the margins, etc. Add that chunk of code three times or less… or more… depending on how many columns you want. Once you finish adding all your divs, add this last div and it should be all awesome!

<div class="clear"></div>

{View a Demo}

This technique works for a three column blog design, for a large header/sidebar, whatever you want to have multiple columns.

I would appreciate your feedback on this tutorial!

This post is over a year old which means the content may be outdated or no longer accurate.

Notes

Likes I doubled-down on RSS by Eric Bailey.

View All Notes

Subscribe

Reading

Goodreads

Jams

Album Art for Lay Your Hands

Simon Webbe

Lay Your Hands

Album Art for Linger

The Cranberries

Linger

Album Art for Sorry

Justin Guarini

Sorry

Dez

I’ve always been curious how to do this but never bothered looking it up because I figured it was too complex. :D I think my next layout will feature 3-column footers and I know where I’ll be at to look up the code ;).

Reply to Dez

Thank you Dez! I believe people assume it’s complicated because it LOOKS fancy, when really at it’s core it’s very simple code.

Damita

Will have to play with mine for my next layout :)
.-= {shared blog entry – Merry Christmas} =-.

Reply to Damita

What I love about this technique is that it’s SO simple and basic that it can be used a billion different ways.

Caity

I also assumed it was a lot more difficult. Thank you!

Reply to Caity
Dayze

Thank you so much for this tutorial, Sarah! I am in the process of a new layout and I cannot wait to try this :)
.-= {shared blog entry – Merry Christmas!} =-.

Reply to Dayze
Tom

you are a CSS secret agent… what “regular” person creates an example page for a quick tutorial…?

I think every page should have more nav features at the bottom (in lieu of scrolling all the way back to the top) and this technique allows those options.
.-= {shared blog entry – What Breastmilk Tastes Like, Part 2} =-.

Reply to Tom
Tom

PS – I’m guessing you are putting a “Clear” div after every “section” of the page?
.-= {shared blog entry – What Breastmilk Tastes Like, Part 2} =-.

Reply to Tom

I am so glad this tutorial is helpful!

@Tom, the ‘clear’ div goes right after your 3 (or whatever number) divs. You can view the source on the demo to see what I mean.

chris

Great post, I have added this to my site and it works perfectly. Thanks.

Reply to chris
Christina

I had no idea it was that easy. I’m going to be designing a layout for my website from scratch for the first time this weekend and this tutorial is a great help!

Reply to Christina

Sweet! Link back here when the design is done!

jeff

hi

looked all over the net for a simple solution to this and yours was the only that worked – thanks!!!!!!!!!!!!!

Reply to jeff

Yay, that’s great!

Joy

So for a “3-column footer” and not a 3-column page content, here’s my own question: If you used percentages for the widths, adding .floatcenter and .floatright to the .floatleft, what would the clear float do?

Thanks.

Reply to Joy

It doesn’t matter if you use pixels, widths, or whatever measurement you want, you still need to clear the float. Otherwise they would just overlap and look messed up (basically).

Joy

Thanks very much. :-)

Reply to Joy
alchimia

I have used your footer for my bsite. I like because it’s simple (more simple that my old solution) and effective. I love you :-)

best

C

Reply to alchimia

Useful tutorial. using this now

Leave a Comment

Thank you for your comment!
Please Read the Comment Policy.


This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond via your own website, enter the URL of your response which should contain a link to this post's permalink URL.
Your response will then appear on this post.