How can I float a bunch of block-level elements such that they occupy 50% of the width including border, padding, and margin?

Question

Here's a mockup of what I'm going for: http://www.jsfiddle.net/Q3aN2/

It has a wrapper container, a bunch of <section> elements, and then some unwanted wrapper divs to space out the content.

Is there a way of doing this that eliminates the unwanted markup? display: table-* perhaps?

Answer 1

No, your example looks good to me. I've always used wrapper elements in the past.