Two-column layout with divs of the same class... and a space in between


There are two <div> elements, each with the same class. It is easy to make them into a two-column layout:

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:

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

Problem courtesy of: Baumr


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.

Solution courtesy of: ace


You could use a pseudo class such as :nth-child(n) or :first-child

section div:nth-child(1) { margin-right: 10%; }

Discussion courtesy of: niels

This recipe can be found in it's original form on Stack Over Flow.