This 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.
wow thats what i was looking for, it is really stated in a good fashion,
Thank you
Johnny
This is exactly what I was looking for … and BTW it worked on my site … the platform is Squarespace, so I wasn’t sure if it would work.
Of course, now I have to go work on it, as it currently still says “more stuff here.”
Thanks again!
Tanya Ryno
LIFT Magazine
Awesome, i’ve been trying to figure out how to simply integrate a nice footer into my site for a while now, thanks!
I’ll have to give this a try and my style, if I can figure it out..lol
it worked perfectly!!! nice and great, all i need to do is tweak the colors, fonts, and background to make it a little more cunning :)
thanks!
Would someone please be kind enough to explain what to change to make these columns center justified.
Thank you.
Awesome tutorial! I had tried copying the css & stuff from another theme, but it didn’t work at all. Your quick and easy tutorial worked like a charm!
Hello John,
I implemented this trick in my blog, I would like to do some fine tuning in this, Can you please visit my site and suggest how I can include these three columns before the copyright message band.
Also please guide how I can add stuff like recent posts,recent comment etc.
Thanks
Thanks a lot. This was exactly what I was looking for.
You saved me a lot of time!!!
Wow this is what I,ve been loooking for this last 2 days.., so I manage to add the column but I’ve lost a sight here how or where I use the column…., any ideas…
Thanks.