Centering Divs

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Centering Divs

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post by shiznatix »

matthijs wrote:So .whole {width:442px} for example.
Someone give this guy a medal, hes a freakin genius!
User avatar
Ollie Saunders
DevNet Master
Posts: 3179
Joined: Tue May 24, 2005 6:01 pm
Location: UK

Post by Ollie Saunders »

Yeah I learnt about this the other day, blew my mind.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Ran across this one the other day when I need help with this...

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