左浮动div的中心容器

Question

Although a lot of questions are about similar issues, they always want all items centered (which of course can be done using display:inline-block ), however I need the last line of items to be neatly floated left and only center the container (which is located in a variable container (the body) itself).

The problem is that no matter what display and clear I set for the container, it never takes the width of the containing floated elements. I am seriously tempted to think that this should be incredibly simple, but I can't figure out how to get it working.

Here is a basic fiddle to play around with.

Answer 1

You have to use an inner div for your solution:

CSS:

#inner{
    width:396px; /* (100+15*2+2) * 3 */
    margin:auto;
}

HMTL:

<div id="container">
    <div id="inner">
        <div class="block">1</div>
        <div class="block">2</div>
         <div class="block">3</div>
         <div class="block">4</div>
         <div class="block">5</div>
         <div class="clear"></div>
    </div>
</div>​

DEMO and DEMO without fixed body width.

UPD: just noticed that you don't want your body width to be fixed. Use width:80%; then instead. DEMO

Answer 2

The problem is you need 2 divs to center this correctly then a set width div to contain all the blocks. Then you can clear it and use the inner inner div (called 'content' in my code here) to control the beginning of the inner float.

Updated your fiddle: http://jsfiddle.net/h9H8w/8/

// HTML
<div id="container">
    <div id="inner">
         <div id="content">
             <div class="block">1</div>
             <div class="block">2</div>
             <div class="block">3</div>
             <div class="block">4</div>
             <div class="block">5</div>
        </div>
    </div>
</div>​

// CSS
body{
    width: 100%;
}
#container{
    float: left;
    position: relative; 
    left: 50%;
}
#inner{
    float: left;
    position: relative; 
    left: -50%;
    border:1px solid black;
}
#content{width: 500px;}
.clear{
    clear:both;
}
.block{
    float: left;
    width:100px;
    height:50px;
    border:1px solid black;
    margin: 15px;

}​