Hi!
I want to center some divs, and I recently learned about margin-left: auto; margin-right: auto; which worked great when i wanted to center my website!
However, it doesn't quite work here.. Possibly because I floated some things inside.
http://img136.imageshack.us/img136/4829/origz.jpg
http://img18.imageshack.us/img18/4469/orig2t.jpg
As you see, on the first picture it displays 4 products(there will always be a maximum of 3 products per row) on 2 rows. It looks pretty centered, because I matched the margins for specifically 3 products per line.
If you check the second picture, where only 2 products is displayed, it is not centered. And if there's only 1 product it's even less centered.
I want to somehow be able to center these based on nr of products on the line.
I've used a markup like this:
HTML Code:
<div id="main">
<div id="products">
<div class="product-line">
<div class="product"><!-- Productinfo/img/price --></div>
<div class="product"><!-- Productinfo/img/price --></div>
<div class="product"><!-- Productinfo/img/price --></div>
</div>
<div class="product-line">
<div class="product"><!-- Productinfo/img/price --></div>
</div>
</div>
<div class="clear"></div>
</div>
CSS:
Code:
#products { padding: 10px; padding-bottom: 0; margin-bottom: 25px; margin-top: 15px; }
.product-line { margin-left: 35px; }
.product { border: 1px solid #000; float: left; width: 200px; margin: 0 10px 10px 0; padding-bottom: 5px; }
.clear { clear: both; }
As you see, I've written an exact margin-left on .product-line to match it with when it's 3 per row. I want this auto, but if I put margin-left: auto; and margin-right: auto; on .product-line it doesn't really work
Any help please?