Grid Layout Assistance Needed

[gee38l]

Hi All

I would like my product layout to look something like on this website http://www.dealsdirect.com.au/c/business-office/

I have been looking through the forums for the past 1 hour and have not found anything to help me...

Basically i just want boxes around all the products and for them to all line up....!

Can anyone please assist me?

Thanks

[stevesh]

We'll have to see what you have now to be of any help.

[gee38l]

Sorry here is a link to my site www.truwater.com.au

[gee38l]

I thought i might give some more info about my issue....

I have looked for .centerBoxContentsProducts in the stylesheets but i can not find it....

So i used .centerBoxContentsNew to center the texts on the new products homepage which worked fine

and

.centeredContent to get the products in all the categories centered.

.centerBoxContentsNew {
text-align:center;
margin-top: 10px;
margin-bottom: 10px;
width:auto;
}
.centeredContent {
text-align:center;
width:auto;
}

Now when i add a border to .centerBoxContentsNew (border 1px solid) it seems to mis align everything (see jpg.)

Also when i add a border around cit works but i cant get them to align evenly and it also adds a border to reviews and search sidebox's (see jpg.)

Basically i want all the products to align evenly similar to www.dealsdirect.com.au

So i figured that .centeredContent is not where i center products text I have tried several others but they dont seem to center the text...

Can someone please assist?

[gjh42]

If you don't see .centerBoxContentsProducts in the stylesheet, just add it and style away.

The border height issue is a limitation of div/CSS layout capabilities. Divs will not automatically take the same height as their neighbors; this is one place where table layout can do something divs cannot do. To reliably get same-height boxes, you will have to code a table layout, or specify the height of all of these divs in the stylesheet like

.centerBoxContentsProducts {height: 230px;}

making sure that none will need to be taller than that. That does mean that if you have a whole row of short product displays, they will all have extra space.

[gee38l]

Thanks for the reply!

I just did what you said and added the centerboxcontentproducts to the stylesheet.css and it didnt do anything do i need to delete the previous lines i have been using to center?

I also added the height to the previous tags and when i add a border it still goes all funny.....

[gee38l]

OK i have jumped the gun a bit...

I just changed the style sheet to what you said above and it seems to have worked for all the products in the categories... the only think i noticed is the line thickness thin around the edges and think on the lines products join! Is there a way to fix this?

Also the new products on the homepage i cant get to align properly.... Please help this has been killing me for the last 12 hours

And one more thing is it possible to align the produxt centered within the boxes?

Thanks

[gjh42]

You need to define "all funny". Adding a border will increase the width of each item, and may force them to not fit in the rows desired. If you are getting say 3, 1, 3, 1, that is the problem.

Yes, the other classes that cause centering will still be in effect unless you delete them.

------

If you specify a border on an element, you will get that border all around it; they don't merge when two are next to each other. You probably want to add something like

border-left-width: 0px;
border-bottom-width: 0px;

[gee38l]

You need to define "all funny". Adding a border will increase the width of each item, and may force them to not fit in the rows desired. If you are getting say 3, 1, 3, 1, that is the problem.

Yes, the other classes that cause centering will still be in effect unless you delete them.

Please read my last post...

as i said i can get the borders around the products in the categories but the thickness is not corrent all the way through.
Is there a fix for this? I cant get it to work on the hompage where the new products are.....

All funny.... like the jpg in the a few posts above it turns the products into 2, 1, 2, 1 etc..

[gee38l]

If you specify a border on an element, you will get that border all around it; they don't merge when two are next to each other. You probably want to add something like

border-left-width: 0px;
border-bottom-width: 0px;

Ok i just tried that and its getting closer to what i want but it seems it has fixed the lines where products meet but removes the lines on the left edge and bottom edge... Please see jpg!