<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

<div class="footerWrapper">
  <h2>Policies</h2>
  <ul>
    <li><a href="/privacy-policy">Privacy Policy</a></li>
    <li><a href="/terms--conditions">Terms & Conditions</a></li>
    <li><a href="/returns-policy">Returns Policy</a></li>
  </ul>
</div>
<div class="footerWrapper">
  <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>
    </ul>
</div>
<div class="footerWrapper">
  <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>
    
  </ul>
</div>

 

 

 

CSS

#footer {
margin: -7px 0 0 0;
}

.footerWrapper .col { 
  background: #0a5173;
  float: left;
  padding: 30px 0 0 35px;
  width: 310px;
}
 
.footerWrapper .col:first-child {
  padding: 30px 0 0 0;
}
 
.footerWrapper h2 { 
  background: url(extra-title-bg.jpg); 
  color: #ff9c00;
  float: left; 
  font-family: 'Raleway', sans-serif !important;
  margin: 0 0 20px 0; 
  padding: 9px 0 0 19px; 
  height: 33px; 
  width: 291px;
}
 
.footerWrapper ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}
 
.footerWrapper li { 
  background: none; 
 float: left; 
  height: 35px; 
  margin: 3px 0;
  padding: 0; 
  width: 310px; 
}
 
.footerWrapper li a { 
  color: #FFF;
  display: block;
  float: left; 
  font-family: 'Raleway', sans-serif !important;
  padding: 10px 0 0 19px; 
  text-decoration: none;
}
 
.footerWrapper li:hover { 
  color: #ff9c00;
}