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…

HTML

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.

<div class="col">
  <h2>recent entries</h2>
  <ul>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
  </ul>
</div>
<div class="col">
  <h2>recent comments</h2>
  <ul>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
    <li><a href="#">3 Column Footer Example</a></li>
   <li><a href="#">3 Column Footer Example</a></li>
  </ul>
</div>
<div class="col">
  <h2>featured on</h2>
  <ul>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
    <li><a href="#'">3 Column Footer Example</a></li>
  </ul>
</div>

<h2>recent entries</h2>

<ul>

<li><a href="#">3 Column Footer Example</a></li>

</ul>

</div>

<h2>recent comments</h2>

<ul>

<li><a href="#">3 Column Footer Example</a></li>

</ul>

</div>

<h2>featured on</h2>

<ul>

<li><a href="#'">3 Column Footer Example</a></li>

</ul>

</div>

CSS

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.

.col { 
  background: #0a5173;
  float: left;
  padding: 30px 0 0 35px;
  width: 310px;
}

.col:first-child {
  padding: 30px 0 0 0;
}

h2 { 
  background: url(extra-title-bg.jpg); 
  color: #FFF;
  float: left; 
  font: bold 18px Arial, Helvetica, sans-serif; 
  font-variant: small-caps; 
  margin: 0 0 20px 0; 
  padding: 9px 0 0 19px; 
  height: 33px; 
  width: 291px;
}

ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

li { 
  background: url(extra-links-bg.jpg); 
  border-bottom: 1px dotted #25c3ba; 
  border-top: 1px dotted #25c3ba; 
  float: left; 
  height: 35px; 
  margin: 3px 0;
  padding: 0; 
  width: 310px; 
}

li a { 
  color: #FFF;
  display: block;
  float: left; 
  font: normal 12px Verdana, Geneva, sans-serif; 
  padding: 10px 0 0 19px; 
  text-decoration: none;
}

li:hover { 
  background: #5fa4c5;
}

.col {

background: #0a5173;

float: left;

padding: 30px 0 0 35px;

width: 310px;

}

.col:first-child {

padding: 30px 0 0 0;

}

h2 {

background: url(extra-title-bg.jpg);

color: #FFF;

float: left;

font: bold 18px Arial, Helvetica, sans-serif;

font-variant: small-caps;

margin: 0 0 20px 0;

padding: 9px 0 0 19px;

height: 33px;

width: 291px;

}

ul {

list-style: none;

margin: 0;

padding: 0;

}

li {

background: url(extra-links-bg.jpg);

border-bottom: 1px dotted #25c3ba;

border-top: 1px dotted #25c3ba;

float: left;

height: 35px;

margin: 3px 0;

padding: 0;

width: 310px;

}

li a {

color: #FFF;

display: block;

float: left;

font: normal 12px Verdana, Geneva, sans-serif;

padding: 10px 0 0 19px;

text-decoration: none;

}

li:hover {

background: #5fa4c5;

}

Result

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