0

OMB 3 Column FooterThis post describes how to add variable width, centered columns of stuff to the Worpress footer. Not sure what I mean? Well, look at the bottom of this site.

  • These columns are fluid width, so it works in different browser resolutions and as you resize the page the columns resize.
  • The columns maintain their centering on the page even as it is resized.
  • You can put anything you want in the columns, though I’ve got text and lists in them for demonstration purposes.
  • It should work with other blogging platforms as well as plain old HTML Web sites.


First, you need to add the following three lines of code to your Stylesheet (you can put them anywhere, but I suggest at the very end). Depending on the theme you are using it is likely either called stylesheet.css or stylesheet.php.

#footercolumns {padding:2em 0 0 10%}
#footercolumns .block {float:left; width:30%; margin:0 0 0 2.5%}
#footercolumns .first, * html #footercolumns .first{clear:both; margin:0}


Next, add the following code to your page footer. In Wordpress it is called Footer.php and you should add these before the </body> code.

<div id="footercolumns">
<div class="inside">
<div class="block first">
<h3>First Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
<div class="block">
<h3>Second Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
<div class="block">
<h3>Third Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
</div>
</div>
<br clear="all" />

Now, I can’t guarantee this will work for 100% of the themes out there, but it should work for most of them. Keep in mind that if you are using a fixed width theme, especially one that is not centered, this may look strange. In that case you may want to switch to a more flexible and accessible theme like my Rapid Access.

DeliciousStumbleUponDiggTwitterMixxTechnoratiFacebookNews VineRedditLinkedInYahoo! BookmarksSphinn It!Hyves
Tags: , ,

Related posts

  1. Fixing Image Alignment in WordPress 2.5 +If you are using WordPress with the built in image uploader, and the image align characteristics are not working for...
  2. Tutorial: How To Put Ads on WordPress Home Page OnlyFolks, since my site has gotten fairly popular I have people who want to advertise on the home page. The...
  3. WordPress: Homepage Ads ONLY After The First ArticleHave you ever wondered how to show Google ads on your WordPress blog’s home page, but only after the very...
  4. Free Wordpress Theme: Rapid AccessAs a result of three Digg homepage appearances over a period of a few weeks bringing my blog to it’s...
  5. Tutorial: Howto Increase the Number of Comments Visible in WordPress EditorFolks, I get a lot of comments here on One Man’s Blog (nearly 7,000 at this point). Often there are...
  6. One Man’s Blog 1 Year Anniversary!Wow, has it been a year already?!? My inaugural post came on July 23, 2006. I didn’t really have a...
  7. Customize the Wordpress Login Screen in 10 StepsTo my normal readers… sorry, but this post is not for you. I’ve been asked technical questions by several people...