How to do a Basic 3-Column Footer
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>
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.
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 ;).
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.
Will have to play with mine for my next layout :)
.-= {shared blog entry – Merry Christmas} =-.
What I love about this technique is that it’s SO simple and basic that it can be used a billion different ways.
I also assumed it was a lot more difficult. Thank you!
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!} =-.
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} =-.
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} =-.
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.
Great post, I have added this to my site and it works perfectly. Thanks.
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!
Sweet! Link back here when the design is done!
hi
looked all over the net for a simple solution to this and yours was the only that worked – thanks!!!!!!!!!!!!!
Yay, that’s great!
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.
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).
Thanks very much. :-)
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
Useful tutorial. using this now