How to set auto-margin boxes in flexible-width design using CSS?

Question

I have DIV with flexible width set e.g. min-width:800px and max-width:1400px. In this DIV, there are many boxes with fix width 200px and display:inline-block. So depending o

Answer 1

quite old but worth trying since multiple rows and text-align: justify; in the #container creates gaps when last row has less divs. I wanted everything to be floated left. So my idea was to use 2 wrappers.

as well as overflow: hidden; in css

.wrapper {
    width:620px;
    border:3px solid red;
    margin:0 auto; overflow:hidden;
}
.wrapper2 {
    width:630px;
}
div.clear {
    clear:both;
}
.box {
    width:200px; background:#000; height:100px; margin-bottom:10px; float:left; overflow:hidden; margin-right:10px;
}

drawback: margins are not auto set...

DEMO: http://jsfiddle.net/hexagon13/2avwf/52/