title: Using CSS Floats and the problems with margins
body: <p>This has always stumped me. And I always thought there must be a better way to do it.</p>
  
  <p>I usually end up having to do a style="margin-right 0px;" on the last div so it shows all three. But I would ideally just like for that to happen without that need.</p>
  
  <p>How would you do it? (must support IE7)</p>
  
  <p>Sample code follows this quick image I created to illustrate what I'm trying to achieve. image.</p>
  
  <p><img src="https://i.imgur.com/vUtcq.gif" alt="lay out example"></p>
  
  <pre><code>.container {
      width: 400px;
  }
  
  .container div {
      width: 100px;
      float: left;
      margin-right: 50px;
  }
  
  .container a {
      display: block; 
  }
  
  .clearfloats {
      clear: both;    
  }
  
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
  
      &lt;div&gt;&lt;img src="someimage.jpg" /&gt;&lt;a href="#"&gt;some link&lt;/a&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="someimage.jpg" /&gt;&lt;a href="#"&gt;some link&lt;/a&gt;&lt;/div&gt;
      &lt;div style="margin-right: 0px;"&gt;&lt;img src="someimage.jpg" /&gt;&lt;a href="#"&gt;some link&lt;/a&gt;&lt;/div&gt;
      &lt;br class="clearfloats" /&gt;
  
      &lt;div&gt;&lt;img src="someimage.jpg" /&gt;&lt;a href="#"&gt;some link&lt;/a&gt;&lt;/div&gt;
      &lt;div&gt;&lt;img src="someimage.jpg" /&gt;&lt;a href="#"&gt;some link&lt;/a&gt;&lt;/div&gt;
      &lt;div style="margin-right: 0px;"&gt;&lt;img src="someimage.jpg" /&gt;&lt;a href="#"&gt;some link&lt;/a&gt;&lt;/div&gt;
      &lt;br class="clearfloats" /&gt;
  
  &lt;/div&gt;
  </code></pre>