Blog Web Dev Fixed Column on Left, Fluid Column on the Right

Fixed Column on Left, Fluid Column on the Right

By Forrest Smith - Drempd.com

A two-column setup, with a fixed width column on the left, and a fluid main column that fills out the rest of the space on the left:

<head> 
   <style> 
      .clear{ 
         clear: both; 
       } 
      .col-secondary{ 
         float: left; 
         width: 190px; 
         background: blue; 
         min-height: 100px; 
      } 
      .col-main{	 
         margin-left: 200px; 
         box-sizing: border-box; 
         background: green; 
         min-height: 200px; 
      } 
   </style> 
</head> 

<body> 
   <div class="col-secondary">
       Left column - fixed width
   </div> 
   <div class="col-main"> 
       Main column - fills the remaining space
   </div> 
   <div class="clear"></div> 
</body>