3 columns layout, variable sides with fixed centered middle column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

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

Description

3 columns layout, variable sides with fixed centered middle column

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">

.left {
   width: 50%;
   height: 300px;
   float: left;
   padding-right: 160px;
   box-sizing: border-box;
   background: red;
}
.right {
   width: 50%;
   height: 300px;
   float: right;
   padding-left: 160px;
   box-sizing: border-box;
   background: blue;
}
.middle {<!--from  w w  w  . j  a v a  2 s. com-->
   position: absolute;
   width: 300px;
   height: 300px;
   left: 50%;
   padding: 10px;
   margin-left: -150px;
   box-sizing: border-box;
   background: orange;
}


      </style> 
 </head> 
 <body> 
  <div class="left"> 
   <p>Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... </p> 
  </div> 
  <div class="middle"> 
   <p>Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... </p> 
  </div> 
  <div class="right"> 
   <p>Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... Lorem ipsum dummy text here blah.... </p> 
  </div>  
 </body>
</html>

Related Tutorials