In my rails app I have a container that holds from 1 to 4 divs that contain product images/text. There is 1 div if someone only selected 1 product in the previous page, 2 divs if someone selected 2 products, 3 div's if someone selected 3 products and so one. So the amount of product div's will varies and change depending on circumstance. 

What I want:
the container and its div's to be centered.

if there is one div, I want that to be centered/margin:auto,
if there are two div's I want them to float/inline-block and margin centered, 
I want all div's to be float and be centered but until all the div's fill the width of the container.

I tried to margin:auto the container, but I need a set width. If I have a set width then it wont grow depending on how many div's are in the container.

[image1 http://www.image-maps.com/uploaded\_files/3201312101150184\_div1.png](http://www.image-maps.com/uploaded_files/3201312101150184_div1.png)

[image2 http://www.image-maps.com/uploaded\_files/3201312101150184\_div2.png](http://www.image-maps.com/uploaded_files/3201312101150184_div2.png)

[image3 http://www.image-maps.com/uploaded\_files/3201312101150184\_div3.png](http://www.image-maps.com/uploaded_files/3201312101150184_div3.png)

width of div's inside container do not change.

My question has nothing to do with the width of the browser.