Page 1 of 1

Centering Divs

Posted: Wed Apr 11, 2007 2:15 pm
by shiznatix
Ok I have these divs that automatically go 4 in a row and breaks to the next line every 4. It is quite nice since I don't have to do a bunch of PHP hacks to make sure that a table is properly created, instead I just do a div and css does the magic for me!

Now the problem is that this group of divs is in a table cell. This is fine and everything but I want all of the divs to be centered inside of that cell. I have tried everything but they just stick to the left.

Here is the table row (I am using PHPTAL as my templating engine)

Code: Select all

<tr>
    <td style="margin-left: auto; margin-right: auto; text-align: center;">
        <div class="whole">
            <div class="box" tal:repeat="product content">
                <a tal:attributes="href product/href"><img width="100" height="100" tal:attributes="src product/img_src" /></a>
                <br />
                <span class="productname" tal:content="product/name"></span>
                <br />
                <span class="productnumber" tal:content="product/code"></span>
                <br />
                <br />
                <span class="productprice" tal:content="product/price"></span>
                <br />
                <a class="bodylinks_productcatalog" tal:attributes="href product/href">View Details</a>
            </div>
        </div>
    </td>
</tr>
here is the relevant css:

Code: Select all

.box img
{
    border: none;
}
.box
{
    display: block;
    width: 123px;
    float: left;
	height: 260px;
	text-align: left;
}
.whole
{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
}
and here is a link to the site in action: http://206.67.234.141/catalog/categories.php?fk_entry=5

If anyone can help me get those products centered that would be freaking awesome.

Posted: Thu Apr 12, 2007 12:39 am
by matthijs
As it is now, you gave the div "whole" a width of 100%. So it will take 100% of its parents place. Now, if you want to make it centered, give it a specific width and use the auto-margin on left and right.

So .whole {width:442px} for example.

I hope that's what you want, otherwise I didn't understand it well.

Posted: Thu Apr 12, 2007 10:41 am
by shiznatix
matthijs wrote:So .whole {width:442px} for example.
Someone give this guy a medal, hes a freakin genius!

Posted: Thu Apr 12, 2007 10:46 am
by Ollie Saunders
Yeah I learnt about this the other day, blew my mind.

Posted: Thu Apr 12, 2007 11:20 am
by JAB Creations
Block level elements always take up 100% of the available width within their parent element except when they are set to float. When they float their width essentially mimics that of an inline element, only what is necessary.

Posted: Thu Apr 12, 2007 11:48 am
by RobertGonzalez
Ran across this one the other day when I need help with this...

http://www.w3.org/Style/Examples/007/center.html