CODEWITHSUNDEEP
csshtmlcss-floatmultiple-columns
Baumr
Baumr

Reputation: 6284

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: 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?

Upvotes: 0

Views: 196

Answers (2)

ace
ace

Reputation: 6825

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.

Upvotes: 1

user1538943
user1538943

Reputation:

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

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

Upvotes: 1

Related Questions