title: Prevent margin from causing floated elements to wrap
body: <p>I have an arbitrary number of equally sized elements which are floated left and separated by some right/bottom margin to display them in a grid. The size of the container holding the floated elements will vary depending on browser window size.</p>
  
  <p>I would like to have the container set to width 100%, and have as many elements fit in a row as possible.</p>
  
  <p>The problem I'm having is that the right margin of the right most element in each row has to be contained inside the the containing element, which means I don't always get as many floated elements as could fit in a row.</p>
  
  <p>I can't just add width to the parent because I want to use width 100%, and removing margin from every nth element in the grid doesn't work because the number of elements in a row will vary depending on the width of the parent.</p>
  
  <p>I suppose I could use jQuery to get the width of the container, calculate how many elements should fit and then remove margin appropriately, but I am hoping there is a more simple way to solve this.</p>
  
  <p>For example, the code below shows 2 boxes per row, but I'd like there to be 3 (without just increasing the width of .wrap).</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
      body{
          margin:0;
      }
      .wrap {
          width: 400px;
          margin: 0 auto;
      }
      main {
          width: 100%;
      }
      .box{
          width: 100px;
          height: 100px;
          margin: 0 50px 50px 0;
          float: left;
          background-color: #999
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class='wrap'&gt;
      &lt;main&gt;
          &lt;div class="box"&gt;
              &lt;p&gt;Some content...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box"&gt;
              &lt;p&gt;Some content...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box"&gt;
              &lt;p&gt;Some content...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box"&gt;
              &lt;p&gt;Some content...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box"&gt;
              &lt;p&gt;Some content...&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="box"&gt;
              &lt;p&gt;Some content...&lt;/p&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>