Resizable column borders in footer - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

Resizable column borders in 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">

div.footer {<!--from   w ww .  j a v a2  s. com-->
   padding:15px 8%;
   margin:0px;
   display:inline-block;
   width:33.333%;
}
div#footerR {
   float:right;
}
div#footerL {
   float:left;
}
div#footerC {
   float:left;
   position:relative;
}
div#footerC:before {
   content : "";
   position: absolute;
   top: 15%;
   left: 0;
   height:75%;
   border-left: 1px solid #ccc;
   border-right: 1px solid red;
   width:100%;
}
div#footerC, div#footerL, div#footerR {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
footer {
   text-align:center;
   width:100%;
   display:flex;
}


      </style> 
 </head> 
 <body> 
  <footer> 
   <div class="footer" id="footerL"> 
    <h1>Left</h1> 
   </div> 
   <div class="footer" id="footerC"> 
    <h1>Mid</h1> 
    <h4> <a>this is a test this is a test</a> </h4> 
   </div> 
   <div class="footer" id="footerR"> 
    <h1>Right</h1> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials