I got this HTML
<div id="wrapper">
<div id="center">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="clearBoth"></div>
</div>
</div>
And CSS
#wrapper{width:100%}
.cell{float:left}
So wrapper is 100% width and the width and number of cells are variable, meaning width of #center is variable too.
Question: How do I keep #center horizontally center-aligned?
Yes you can do it with display:inline-block
.
For example:
css:
#wrapper{
width:100%;
text-align:center;
}
#center{
display:inline-block;
*display:inline;/* IE*/
*zoom:1;/* IE*/
background:yellow;
overflow:hidden;
text-align:left;
}
.cell{
float:left;
width:50px;
height:50px;
background:red;
margin:5px;
}
Check this example http://jsfiddle.net/8a4NK/