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

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 u开发者_运维知识库nwanted wrapper divs to space out the content.

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

---

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