Stop box from breaking to next line due to extra margin?

You can use nth-of-type(2n) to target every other div. Then set the right margin to zero.

http://jsfiddle.net/LUFFP/5/

.boxes_3:nth-of-type(2n) { margin-right: 0px; }

Depending on your browser requirements, there's a CSS3 selector to do that: http://jsfiddle.net/ttpK6/1/

Compatability list here: http://kimblim.dk/css-tests/selectors/

#main_2
{
    background: #FF0000;
    width: 404px;
    border: 1px solid #000;
    overflow: hidden;
}

.boxes_2
{
    background: #F3F3F3;
    width: 195px;
    display: inline-block;
    margin-right: 10px;
}

Notice that I changed the width and set overflow to hidden. No special CSS3 requirements.

try it

 #main_2 {background: #FF0000; width: 411px;  border: 1px solid #000;}
.boxes_2 {background: #F3F3F3; width: 205px;  float:left;}