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!

Subscribe to my posts via email

You can also follow me on BlogLovin or Feedly
Dez
posted on December 26th 2009 at 4:06AM CST

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

posted on December 26th 2009 at 4:09AM CST

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
posted on December 26th 2009 at 7:21AM CST

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

posted on December 26th 2009 at 8:05PM CST

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

Caity
posted on December 28th 2009 at 5:22PM CST

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

Dayze
posted on December 28th 2009 at 7:50PM CST

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!} =-.

Tom
posted on December 28th 2009 at 10:20PM CST

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} =-.

Tom
posted on December 28th 2009 at 10:21PM CST

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} =-.

posted on December 30th 2009 at 1:17PM CST

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.

posted on November 8th 2010 at 9:38AM CST

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

Christina
posted on July 6th 2011 at 10:34PM CST

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!

posted on July 11th 2011 at 6:00PM CST

Sweet! Link back here when the design is done!

jeff
posted on July 29th 2011 at 5:22PM CST

hi

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

posted on September 15th 2013 at 10:07PM CST

Yay, that’s great!

Joy
posted on September 15th 2013 at 7:31AM CST

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.

posted on September 15th 2013 at 10:05PM CST

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
posted on September 16th 2013 at 12:34PM CST

Thanks very much. :-)

alchimia
posted on October 1st 2013 at 9:58AM CST

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

posted on December 9th 2013 at 7:02PM CST

Useful tutorial. using this now

Leave a Reply

Thank you for commenting! Comments are moderated according to my comment policy.