Four-column floated left with equal left and right margins - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

Four-column floated left with equal left and right margins

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

.section {<!--from   w w  w .j a va 2s . com-->
   overflow:auto;
   width:940px;
   background:#fff;
   border:1px solid green;
   margin:0px;
}
.col_1 , .col_2 ,.col_3, .col_4{
   margin-right:15px; /* Modified */
   margin-left:15px; /* Modified */
}
.col_1 {
   background:orange;
   width:175px;
   padding:15px;
   float:left;
}
.col_2 {
   background:yellow;
   width:410px;
   padding:15px;
   float:left;
}
.col_3 {
   background:green;
   width:645px;
   padding:15px;
   float:left;
}
.col_4 {
   background:tan;
   width:880px;
   padding:15px;
   float:left;
   overflow: hidden;
}


      </style> 
 </head> 
 <body> 
  <div class="section"> 
   <div class="col_3">
     col_3 
   </div> 
   <div class="col_1">
     col_1 
   </div> 
  </div> 
  <div class="section"> 
   <div class="col_2">
     col_2 
   </div> 
   <div class="col_1">
     col_1 
   </div> 
   <div class="col_1">
     col_1 
   </div> 
  </div> 
  <div class="section"> 
   <div class="col_1">
     col_1 
   </div> 
   <div class="col_1">
     col_1 
   </div> 
   <div class="col_1">
     col_1 
   </div> 
   <div class="col_1">
     col_1 
   </div> 
  </div> 
  <div class="section"> 
   <div class="col_4">
     col_4 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials