Vertical Div Spacing

Question

How do you horizontally distribute 3 divs with the least amount of code?

I have 3 divs that have the same class, and I need to distribute them horizontally, with 19 pixels of space between each div.

My solution currently is to give the first 2 divs a right margin of 19 pixels, and assign a separate class to the 3rd div that gives it a left margin of 19 pixels.

This gets the job done, but I feel like there may be a better way of doing it. Ideally, all 3 divs would still have the same class.

Answer 1

See: http://jsfiddle.net/thirtydot/q6Hj8/

.yourDivClass + .yourDivClass {
    margin-left: 19px
}

That uses the adjacent sibling combinator to apply margin-left to every .yourDivClass which is preceded by a .yourDivClass - in other words, all except the first.

Answer 2

You only need two columns with a right margin; the third column needs no additional margin. Border added so you can see it in a fiddle.

div.hasMargin
{
    margin-right: 19px;
}

div.column
{
    border-color: black;
    border-style: solid;
    border-width: 1px;
    float: left;
}

Here is a fiddle