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!
Answers to Your Questions {Part Two}Click to skip down and add your comment
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.
What I love about this technique is that it’s SO simple and basic that it can be used a billion different ways.
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.
shared blog post — James Bond Aston Martin DB5– Video
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!
hi
looked all over the net for a simple solution to this and yours was the only that worked — thanks!!!!!!!!!!!!!
Commenting Guidelines
BasicsOnce 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 light be held for moderation, it's not done on purpose, but sometimes WordPress light be confused, I will manually approve your comment as soon as I can, and apologize for the delay.
Email AddressesCorrect 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 acceptableProfanity, poor spelling and grammar, personal attacks, and off-topic comments.
AvatarsThe 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>)
Leave a Reply
- Breastfeeding and the Dentist
- My New Purple Hair
- Answering Your Questions… Beauty
- Soothing
- January 2012 Cravebox
- Sarah’s Test Bunny of Doom… Jillian Michael’s 30 Day Shred
- WordPress Plugins I Currently Use
- Nail Polish Organization
- January 2012 Birchbox
- January 2012 MyGlam Bag
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 ;).