Question

When i’m centering a DIV i will give it a width and put margin:auto on it, however i have two problems with this situation.

1. There are going to be either 2 or 3 DIVS inside this parent DIV with float:left on them. The width of the child DIVS won’t change but the number might (2 or 3).

2. This therefore means i cant put a width on the parent DIV through not knowing the number of DIVs inside.

sample markup:

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
</div>

or

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

So in summary, i need to have the parent DIV centered with the DIVs inside floated left.

Answer 1

See: http://jsfiddle.net/qk4dW/

.wrapper {
    text-align:center;
}
.parent,.child {
    display:inline-block;
}

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

It should work.