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

I answered a similar question here

This is possible in pure css3 using media queries and the css calc() routine.

Of coarse this will only work on modern browsers. IE9+,Chrome,Firefox,

See this WORKING DEMO

The basic idea is to set up a media query for each #columns states, where I then use calc() to work out the margin-right on each of the elements (except the ones in the last column).

Answer 2

You need to make .box inline-blocks, and justify text in .wrapper. .wraper:after is needed to justify the last line. Older IEs don't understand after, but in IE text-align-last:center will take care of the last line.

.wrapper{
    text-align:justify;
    max-width:1400px;
    min-width:800px;
    text-align-last:center;
}
.wrapper:after{
    content:'';
    display:inline-block;
    width:100%;
    height:0;
    font-size:0;
    line-height:0;
}
.box{
    display:inline-block;
    *display:inline;
    vertical-align:top;
    width:200px;
    height:50px;
    background:red;
}

Here's a jsfiddle.