No margin right on most right block - html

Question

I have a lot of blocks, and I want to order them in a table-like way. The problem is, that because of the margin-right of the last one, they don't really fit in the way I want them to. See this example. I want to have 4 blocks on one line, how can I achieve that?
CSS:
.box {
width: 500px;
height: 10000px;
}
.block {
float: left;
width: 100px;
height: 100px;
margin-right: 30px;
background-color: #0f0;
margin-bottom: 50px;
}

Answer 1

Use last-child, a CSS selector, like so: http://jsfiddle.net/QwGV5/1/
.block:last-child {margin-right: 0;}
For compatibility: http://caniuse.com/css-sel3

Answer 2

div:last-child {
margin-right: 0;
}
But this will only work in IE9+ (maybe 8, can't remember)
Otherwise, put a class on the last one.
Here's an update to your fiddle http://jsfiddle.net/QwGV5/2/
I think for what you want to do though, you'd actually want it on every 4th div. So you can use nth-child
.box div:nth-child(4n) {
margin-right: 0;
}
Eaxmple: http://jsfiddle.net/QwGV5/4/

Answer 3

You can make a new class for the last block in each row (e.g. .last) and make margin-right:0 for that class.
HTML:
<div class="box">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block last"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block last"></div>
</div>
CSS:
.last { margin-right: 0; }
JS Fiddle Example