I want to do this without JavaScript. I already have a JS solution but want to know if this is possible with pure CSS.

Let's say you have a page showing products off. When the page resizes I want to have those product boxes flex with the page layout. Each one should have a max-width and min-width. A table won't work because I can't have a fixed number of columns. Depending on the browser width, there could be between 1 to 6 products on a single row. The following doesn't work, but it's the closest I've got.

```
#prducts > div {
    float: left;
    max-width: 200px;
    width: auto;
    min-width: 100px;
    background-color: #3333FF;
    height: 250px;
    margin: 5px;
}

```

Here's the fiddle: <http://jsfiddle.net/79CBq/2/>

Is it possible to make a DIV do auto width and still adhere to the min/max values I set? Unfortunately width: auto only changes the width if there is content inside making it bigger.

This is just really dumb to me, because a DIV with "display: block" has the right kind of auto-width but I can't find an option to give that to an inline-block or float DIV.