Question

I currently have a simple setup: a centered container div that is 90% width of the screen that contains five 20% width divs. This works great when the div’s all fit on on row. They all adjust so that they are evenly spaced and centered. However, because the 5 divs must have a minimum width when the user resizes the screen to a small width they fill up more than one row and are no longer centered. Once this happens I want them to keep their minimum width, but be centered so that you can see the blue container div on either side of the top row of divs instead of having them all left aligned (and like wise for the following rows). How can I go about doing this in HTML and CSS? Thanks.

<style type="text/css">
.container {
  height: 220px;
  width: 90%;
  max-width: 1200px;

  margin-left: auto;   
  margin-right: auto;

  background-color: blue;
}

.box {
  position: relative;
  height: 100%;
  width: 20%;
  min-width: 200px;

  margin: 0 auto;
  float: left;

  background-color: red;
}
</style>


<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div> 

Answer 1

If instead of using Floats, you use display:inline-block in conjunction with text-align:center I think you will get a centered effect you desire.

.container 
{
    text-align:center;
}

.box 
{
    display:inline-block;
    /*For IE*/
    *display: inline;
    zoom:1;
    /*Aligns divs vertically along the top*/
    vertical-align:top;
}

Example Here:

http://jsfiddle.net/DigitalBiscuits/pXGz3/3/

(Resize the result window to see the effect)

Note: when using inline-block, make sure there are no carriage returns between the <div>s. otherwise you will get a little bit of unwanted space between them