title: Columns Alignment in CSS
body: <p>I guess this is a simple one, but still I have a little problem with this, since I'm a little bit new with CSS.
  I want the columns align with the longest column.</p>
  
  <p><a href="http://jsfiddle.net/RBY3e/" rel="nofollow"><strong>JSFiddle</strong></a> </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="header"&gt;
          Header Title
      &lt;/div&gt;
      &lt;div class="left_col"&gt;&lt;/div&gt;
      &lt;div class="main_col"&gt;&lt;/div&gt;
      &lt;div class="right_col"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>*, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  body {
  }
  
  .header {
      padding: 10px;
      background-color: yellow;
      min-width: 200px;
      font-size: 30px;
  }
  
  .left_col {
      background-color: cyan;
      width: 15%;
      padding: 10px;
      float: left;
      font-size: 12px;
  }
  
  .main_col {
      background-color: salmon;
      width: 70%;
      padding: 10px;
      font-size: 12px;
      float: left;
  }
  
  .right_col {
      background-color: greenyellow;
      width: 15%;
      padding: 10px;
      float: right;
      font-size: 12px;
  }
  
  .main {
      width: 100%;
      height: 100%;
  }
  </code></pre>