title: Calculations for responsive divs not working
body: <p>I have a 960px wide wrap, and then a 930px wide main-content wrap with 15px left/right margins. within the main-content wrap there are three divs floated left that are each 280px wide, with 15px margin-right to fill the main-content. To avoid giving the div to the right a margin and make it not fit I gave it another class and set its margin-right to 0. </p>
  
  <p>I am trying to make the site responsive and these are my percentage calculations:<br>
  wrap=100%<br>
  main-content=96.875%<br>
  main-content margins=1.5625%<br>
  divs=30.10752688%<br>
  div margins=1.61290323<br></p>
  
  <p>CSS:</p>
  
  <pre><code>#page-wrap {
      width:960px; 
      margin: 0 auto; 
      background: white;
  }
  #main-content {
      width:96.875%;
      margin:15px 1.5625% 0 1.5625%;
  }
  .box { (the divs)
      float:left;
      width:30.10752688%;
      min-height:160px;
      margin:30px 1.61290323% 0 0;
  }
  .right{ (only the div to the right)
      margin-right:0;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="page-wrap"&gt;
  &lt;div id="main-content"&gt;  
  
  &lt;div class="box"&gt;   
  content
  &lt;/div&gt;
  
  &lt;div class="box"&gt;   
  content
  &lt;/div&gt;
  
  &lt;div class="box right"&gt; 
  content
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't know why the divs dont seem to resize correctly. Any help would be much appreciated!
  The site can be viewed here for now: <a href="http://hl.kylmark.se" rel="nofollow">http://hl.kylmark.se</a></p>