title: 4 column CSS layout - Fluid
body: <p>I'm going around in circles trying to figure this out. </p>
  
  <p><strong><em>HTML/CSS:</em></strong> </p>
  
  <pre><code>&lt;style type='text/css'&gt;
  
  #content {
      padding: 20px;
      background: #F3F6F7;
  }
  
  .inner-box {
      background: #fff;
  }
  
  .inner-box .col {
      background:#eee;
      display:block;
      float:left;
      margin:1%;
      padding:20px;
      width:23%;
  }
  
  &lt;/style&gt;
  
  &lt;div id="content"&gt;      
      &lt;div class="inner-box clearfix"&gt;
          &lt;div class="col col-1"&gt;
              COl1
          &lt;/div&gt;
          &lt;div class="col col-2"&gt;
              COl2
          &lt;/div&gt;
          &lt;div class="col col-3"&gt;
              COl3
          &lt;/div&gt;
          &lt;div class="col col-4"&gt;
            COl4
          &lt;/div&gt;
  
      &lt;/div&gt;              
  &lt;/div&gt;    
  </code></pre>
  
  <p>I basically want a fluid 4 column layout with an equal bit of padding around each column and the whole thing to span 100% across the screen.</p>
  
  <p>The code above works but as soon as i scale the browser the 4th column on the right will shift down under the rest.</p>