title: How can I float a bunch of block-level elements such that they occupy 50% of the width including border, padding, and margin?
body: <p>Here's a mockup of what I'm going for: <a href="http://www.jsfiddle.net/Q3aN2/" rel="nofollow noreferrer">http://www.jsfiddle.net/Q3aN2/</a></p>
  
  <p>It has a wrapper container, a bunch of <code>&lt;section&gt;</code> elements, and then some unwanted wrapper divs to space out the content.</p>
  
  <p>Is there a way of doing this that eliminates the unwanted markup? <code>display: table-*</code> perhaps?</p>