Question

I’m dynamically generating more divs (of same size with same content), and I want them side by side and also center them.

Example:
Assuming there can be 4 divs on one line I want it do look this:

1 div: ...[]...

2 divs: ..[][]..

3 divs: .[][][].

4 divs: [][][][]

5 divs:
[][][][]
...[]...

Is this possible?

I know you can put multiple div’s in one line (and let them wrap) with float:left and an outer container with width: 100%

Test here: http://jsfiddle.net/Tyilo/cD7e3/1/

Answer 1

Sure, that’s possible:

http://jsfiddle.net/pRNgH/

I included the hacks required to make display: inline-block work in IE6/7, for more info:

Inline block doesn't work in internet explorer 7, 6

You need to ensure that you don’t output whitespace between the .dynamics, or this happens.

CSS:

.divHolder {
    width: 400px;
    border: 2px solid red;
    margin: 0 0 16px 0;
    text-align: center
}
.dynamic {
    text-align: left;
    width: 100px;
    height: 50px;
    background: #ccc;

    display: inline-block;
    /* make it work in ie7 */
    *display: inline;
    zoom: 1
}

HTML:

<div class="divHolder">
    <div class="dynamic">2</div><div class="dynamic">2</div>
</div>