title: Box-Sizing Not Working
body: <p>I'm using box-sizing property to align left div, right div and center div within container div. The div's are not aligning. Below is the code i have tried. I also tried using px. I am using Firefox to check.</p>
  
  <p>I have also added in jsfiddle, <a href="http://jsfiddle.net/F9ds9/" rel="nofollow">http://jsfiddle.net/F9ds9/</a></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;style&gt; 
  
      .container{  
          width:100%;         
      }
  
      #left{
          -moz-box-sizing: border-box;
          margin-top:12px;
          float:left;
          border:1px solid #000000;
          width:20%;
      }
  
      #right{
          -moz-box-sizing: border-box;
          margin-top:12px;
          float:left;
          border:1px solid #000000;
          width:20%;
      }
  
  
      #center{
          -moz-box-sizing: border-box;
          margin:12px;
          float:left;
          border:1px solid #000000;
          width:60%;
  
      }
  
  
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div class="container"&gt;
        &lt;div id="left"&gt;LEFT&lt;/div&gt;
        &lt;div id="center"&gt;CENTER&lt;/div&gt;
        &lt;div id="right"&gt;RIGHT&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>