Question

There are two <div> elements, each with the same class. It is easy to make them into a two-column layout: http://jsfiddle.net/Baumr/nbzHA/3/

So here’s the catch:

How do you add a whitespace between them?

It would be easy to make two separate classes, and float them either way.
Or add a class to one and use margins: http://jsfiddle.net/Baumr/sZehH/1/

But what if they’re in the same class/no class?

Answer 1

Adding a class on the first div is the best browser compatibility solution, then add your style for this class.

There are things I noticed with your fiddle which make it complex to have solution based on your comments to niels. You have a section tag in your fiddle which will render in a browser supporting an html5. But you want to have a compatibility with IE7 and IE6?

There are ways for IE7, below is one of those:

.section div+div {
    margin-left: 10%;
}

This solution use the Adjacent sibling selectors which added a margin-left on the second div. And also, instead of section tag I use a <>div with class=section for the benefits of browser that don’t support section.

For IE6, adding a class on one of the two <>div is the only solution I know.