My Random Thoughts and What Not.

3 Column Footer with CSS

More and more websites especially blogs are beginning to put more information in their footer. This technique will create 3 columns where you can place useful information such as recent posts, recent comments, etc…


In order to create 3 columns we will separate each section into its own div container. The last column will need a second class added to the div to remove the right margin. You could use the last-child class but it isn’t cross-browser compatible with older versions of Internet Explorer. You can use Javascript to get the last-child element to work, such as Dean Edwards solution IE7.js. Oddly enough IE7 does support the first-child element which is another alternative.


For this 3 column footer I used images for both the column heading and individual list items. The headings are in span tags and the list is setup like a normal vertical list with a background change on hover. Nothing else to it other than that.


That is the code for the footer itself and then add the container for the footer and position it at the bottom and you can view the result below. If you have any questions, suggestions, or comments feel free to discuss them below.

View Demo



Really great and helpful! Thanks much!


Hey, using like this would throw other CSS stuff. Use

col#li and col#ul in your CSS files.


Great! Very clear, very short, very nice. Tnx.

Leave a Reply

Your email address will not be published. Required fields are marked *