How to center dynamically changing grid in div? - html

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/
Floated elements shrink wrap, so they need a width attached.
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.