How to do a Basic 3-Column Footer

12/26/09

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 4^th 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!

archived under: Q&A

{13 comments}

Stay up to Date

204 tweeps are following me on Twitter, you should too!

Add my RSS feed to your favorite reader, 354 have subscribed so far!

562 people like OSN on Facebook, you should too!

Click to skip down and add your comment

Dez (21 comments) twitter: @Sirenism

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

Sarah (3058 comments) twitter: @onestarrynight

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 (112 comments) twitter: @damita

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

Sarah (3058 comments) twitter: @onestarrynight

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

Caity (122 comments) twitter: @caitysparkles

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

Dayze (2 comments)

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 (15 comments)

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 (15 comments)

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

Sarah (3058 comments) twitter: @onestarrynight

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 (1 comments)

Great post, I have added this to my site and it works perfectly. Thanks.
shared blog post — James Bond Aston Martin DB5– Video

Christina (5 comments)

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!

Sarah (3058 comments) twitter: @onestarrynight

Sweet! Link back here when the design is done!

jeff (1 comments)

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

Commenting Guidelines

Basics

Once your comment is posted it then is the property of OSN. I can edit, format, reuse or delete the comment as I wish, or display it for as long as I wish. I will not necessarily offer reasons or any warning why I have altered or deleted a comment.

Occasionally your comment might be held for moderation, it's not done on purpose, but sometimes WordPress might be confused, I will manually approve your comment as soon as I can, and apologize for the delay.

Email Addresses

Correct email addresses are required. Email addresses will never be published. Email addresses will not be shown in comments. Please leave your correct email address (as in youNOSPAM@domain.com or youREMOVE@domain.com are not correct) it is so I have the ability to reply to your comment via email. I will edit out the NOSPAM or REMOVE in the email field.

What is not acceptable

Profanity, poor spelling and grammar, personal attacks, and off-topic comments.

Avatars

The avatars that are shown are via Gravatar. If you do not have one associated with your email address it will show a default image, however I suggest you sign up to get one since many blogs use this feature!

Commenting Additions You light use the following mark-up within your comments. I only permit XHTML mark-up at this time. Line breaks are converted automatically.
(<em> <del> <strong> <pre> <code> <blockquote>)

← Older

Newer →

The Blurb

I'm Sarah, married mom of two fantastic boys, Daniel (10yrs) & Tristan (2yrs). I'm passionate about Attachment Parenting & photography! I like to help people with blog design and coding. Why don't you learn more about me!

Follow me on my private twitter, or my public twitter, stay up to date using the RSS feed or even connect with me on my personal Facebook page or my OSN Facebook page!

The Button