Question

I have a wrapper containing several divs. I would like this wrapper to be centered horizontally and I would like this wrapper to wrap all its content (height auto). In the here below “attached” JSFiddle template you’ll see that the wrapper wraps all its content but is not centered horizontally. If I remove the float property from the wrapper it is then centered Horizontally but the wrapper does not wrap anymore its content. Hope someone can help me have both centered and wrapped. Thank you in advance for your replies. Cheers. Marc.

http://jsfiddle.net/xbcxs/1/

My HTML:

<div id="wrapper">
    <div id="column1" class="column">
        <div id="contentOne" class="content">contentOne</div>
        <div id="contentTwo" class="content">contentTwo</div>
    </div>
    <div id="column2" class="column">
        <div id="contentThree" class="content">contentThree</div>
    </div>
</div>

My CSS:

#wrapper {
    margin:10px auto;
    width:430px;
    float:left;
    height:auto;
    border:2px solid blue;
}

.content {
    border:1px solid black;
    background-color:yellow;
    width:200px;
    height:100px;
}

.column {
   float: left;        
}

#contentThree {
   height: 130px;        
}

​
​

Answer 1

Change your #wrapper CSS to:

#wrapper {
    margin:10px auto;
    width:430px;
    height:auto;
    border:2px solid blue;
    overflow:hidden;
}

Updated jsFiddle: http://jsfiddle.net/xbcxs/2/