Fixed height border for footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer

Description

Fixed height border for footer

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.wrapper {<!--from  w  ww  .j  a  v a2s  . com-->
   display: inline-block;
   background-color: #000000;
   width: 100%;
   height: 150px;
   color: red;
}
.col-sm-2 {
   float: right;
   margin: 0;
   width: 32%;
   display: inline-block;
   height: 90%;
}
.footer-col {
   display: block;
   float: right;
   margin: 0;
   width: 90%;
   padding-left: 10px;
   display: inline-block;
   height: 90%;
}
ul {
   display: inline-block;
   width: 90%;
   height: 100%;
   border-right: 1px solid red;
   list-style: none;
}
li a {
   color: #FFFFFF;
}


      </style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div class="col-sm-2"> 
    <div class="footer-col"> 
     <ul> 
      <li class="footer-title hidden-xs">Customer Care</li> 
      <li> <a href="">Contact us</a> </li> 
      <li> <a href="">Help</a> </li> 
      <li> <a href="">Shipping</a> </li> 
      <li> <a href="">Returns</a> </li> 
      <li> <a href="">Guide</a> </li> 
     </ul> 
    </div> 
   </div> 
   <div class="col-sm-2 hidden-xs"> 
    <div class="footer-col"> 
     <ul> 
      <li class="footer-title">About Us</li> 
      <li> <a href="">Our Story</a> </li> 
      <li> <a href="">Careers</a> </li> 
     </ul> 
    </div> 
   </div> 
   <div class="col-sm-2 hidden-xs"> 
    <div class="footer-col"> 
     <ul> 
      <li class="footer-title">Shortcuts</li> 
      <li> <a href="">My Account</a> </li> 
      <li> <a href="">Store Locator</a> </li> 
      <li> <a href="">Gift Cards</a> </li> 
      <li> <a href="">Payment</a> </li> 
     </ul> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials