title: Floating two 50% width divs with a 10px margin between
body: <p>I want to float a pair of fluid divs across my page, each taking up half of their container's width, but with a margin of 10px between them. I've done this JSFiddle <a href="http://jsfiddle.net/andfinally/sa53B/5/" rel="noreferrer">http://jsfiddle.net/andfinally/sa53B/5/</a>, and here's the HTML: </p>
  
  <pre><code>&lt;div class="clearfix"&gt;
      &lt;a class="prev" href="#"&gt;Previous&lt;/a&gt;
      &lt;a class="next" href="#"&gt;Next&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.prev {
      background: black;
      color: white;
      font-size: 16px;
      margin-bottom: 10px;
      display: block;
      float: left;
      box-sizing: border-box;
      width: 50%;
      margin-right: 5px;
  }
  
  .next {
      background: black;
      color: white;
      font-size: 16px;
      margin-bottom: 10px;
      display: block;
      float: right;
      box-sizing: border-box;
      width: 50%;
      margin-left: 5px;
  }
  </code></pre>
  
  <p>The box-sizing rule isn't enough to make this work - the divs are more than 50% wide. In one of the answers to <a href="https://stackoverflow.com/questions/8805150/css-two-columns-with-variable-width-and-a-fixed-gap-between-them">this question</a> somebody suggested using CSS display-table. Can anyone explain how to make that work in this situation?</p>
  
  <p>Thanks!</p>