OSN Header

How to do a Basic 3-Column Footer

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.

Subscribe to Weekly Posts & snippets

Snippets

Spring Equinox

A blessed Ostara / Spring Equinox / First Day of Spring to you!

Small OSN Refreshes

Changed the following to OSN:

Another Good Show

Wow, ABC is on a roll with the new shows lately! I really enjoyed The Company You Keep.

Click to Skip to comment form

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.

chris
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 CDT

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 CDT

Sweet! Link back here when the design is done!

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

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 CDT

Yay, that’s great!

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

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 CDT

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 CDT

Thanks very much. :-)

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

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 Comment

Thank you for your comment!
Read the Comment Policy.

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


Powered by &
privacy policy / disclaimer