Fluid column layout with fixed pixel margins between them - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Fluid column layout with fixed pixel margins between them

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

.container {<!--from www .j  av  a  2 s  . c  o  m-->
   background: green;
   overflow: auto;
}
.box {
   width: 33.3%;
   float: left;
}
.box.last {
   width: 33.4%;
}
.box .box-content {
   margin-right: 10px;
   background: red;
   margin-bottom: -1000px;
   padding-bottom: 1000px;
}
.box.last .box-content {
   margin-right: 0px;
   background: red;
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="box"> 
    <div class="box-content">
      First 
     <br> First again 
    </div> 
   </div> 
   <div class="box"> 
    <div class="box-content">
      SECOND 
    </div> 
   </div> 
   <div class="box last"> 
    <div class="box-content">
      Last 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials