views:

201

answers:

3

hello guys!

i have this piece of code

<body>

    <? while.. (blah blah blah){ ?>

        <div class="product">
             something
        </div>

        <? } ?>
</body>

and the css file is

.product{ width:350px; float:left; }

the problem is that body doesn´t have a width, well... actually it has, 90%, but my problem is on the different resolutions, it works perfect for me (1680px width) but when i switch to 1024 as example, the products seems to be off (aligned to the left)

is there any posibility to center those divs with a non static with on their parent container?

+2  A: 

if you turn floating off, you can use

margin-right: auto;
margin-left: auto;
Pekka
yeah, but i will see a list of products one below another, and i want them to be in rows, not just one column.what i want to do is similar to google images, the images are not centered as well, but the difference is really small.
Andy
A: 

If you declare a width in percentage for the div, and then do margin-left:auto;, margin-right:auto;, would that be OK?

You could give the images some left and right padding and that should make your images centered.

tahdhaze09
+2  A: 

If you want multiple divs, all centered as a group, you'll have to wrap them in a parent div, then center that using margins.

Your other option would be to make them display: inline; and use text-align: center on the body to center them. (Or consider making them spans, which default to inline)

keithjgrant