Question

I need to create a centered grid of squares with text inside it. With jQuery help user will be able to add or remove squares (in row and column).

Basically the code would be:

<style>
div.square{
    padding: 5px;
    margin: 5px;
    border: 1px solid green;
    /*display: inline-table; /* IE fail*/
    /*display: inline-block; /* IE fail*/
    float: left;
}
div.row{
    margin: 0 auto;
}
</style>

<div style="width:500px; border:1px solid red; margin: 0 auto">
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
    <div class="row">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
    </div>
    <div style="clear:both"></div>
</div>

What is the best way to do it?

Answer 1

Are you looking for something like this:

http://jsbin.com/etunuk/1/

1. Floated elements shrink wrap, so they need a width attached.
2. To center floated elements you need to add their width + paddings + margins + borders and assign that width to the wrapper, in this case .row and center .row.

If you remove the border, you need to remove the width, 1px * 6 from the row width and so on.