Having the floating children elements determine parent width

Question

Here is an example

http://jsfiddle.net/BringMeAnother/LwXhE/

// html

    
         


        
      

Answer 1

By wrapping your container div in another wrapper div, you can centre your red container div, and the red div will only be as wide as its floating children.

HTML

CSS

.centered {
    text-align: center;
}
.container {
    background: red;
    padding: 10px;
    display: inline-block;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

Fiddle: http://jsfiddle.net/SbPRg/