Center floated child DIVs in a parent DIV that has fluid width

Question

I have the following HTML:

     
Box1
     
Box2
     

        
      

Answer 1

You can add invisible placeholders to the end of your inline blocks. That will left-align the last row.

http://jsfiddle.net/aakt65x4/

If you don't fill up the first row, the entire thing will appear left-aligned. But I think that's what you want.

HTML:

CSS:

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}