Vertical distance

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 for now is to give the first two divs the right edge at 19 pixels and assign a separate class to the third div, which gives it the left edge at 19 pixels.

This does its job, but I feel that there may be a better way to do this. Ideally, all 3 divs will still have the same class.

Answer 1

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

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

It uses a nearby sibling combinator to apply margin-left to each .yourDivClass preceded by a .yourDivClass - in other words, everything but the first.

Answer 2

You need only two columns with the right margin; the third column does not need additional stock. A border has been added so you can see it in the violin.

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

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

Here is the fiddle