Category div container shifting

When I enter a category it displays like this



However when I enter a sub category of that category it displays like this



I fixed the subcontainer box width to 200 px, which fixes only when i have four sub categories, it comes out looking like the one above

.hikashop_subcontainer{
padding-top:10px;
padding-bottom:10px;
padding-right:2px;
padding-left:2px;
height: 230px;
width: 200px;
}

otherwisee if i remove the width 200px it comes out like this.





Im not sure whats going on and why the box widths are changing from category to subcategory. Please help

Can you give us a like to your web site ? it would help us to know how to solve this.

The website is still in test mode before we launch it, but here is the link

test.climatictech.co.za/index.php/en/

I think that you can try at least to change the picture size in "Hikashop->System->Configuration->Files".

I have tried that already. although that only changes the picture size within the actual product page. To change the image size within a category you have to changed the image sizes in the associate modules. and they are all the same

test.climatictech.co.za/index.php/en/man...ory/96-uncategorized

In this link all the photos are perfect, just the way I want them

But in other places its different like the root category page

test.climatictech.co.za/index.php/en/manufacturer

Why is that so different if the images are set to be exactly the same size

No matter how small I make the images, the container keeps shifting to before the picture

The system uses the number of columns option of the listing in order to compute the width of each item box.
If you have images going "over" the item box, it means that you should either reduce the width of images, reduce the margin or reduce the number of columns or a mixed of these three parameters of your listing.
There is no need to change the CSS to avoid that.

I checked your links but I don't see the problem anymore. Did you figured something out already maybe ?

I just changed the settings in the CSS and it worked fine for those pages but it threw some other pages out. So now i reverted the settings.
I've put the CSS styling on default so you can see what its doing.

I have tried all that already. I've made my margins 5px, reduced the image size to 100 X 100, and even the number of columns to 3
Its still doing this


Im not sure what more I can try

As far as I can see, it's just you're template's main area which doesn't take the full width of the page.
Adding such CSS on your website will make that happen and render the listing on the full width of the page:
#content_full{width:100%;}

Thanks Nick, I figured it out last night, when i switched over to another template and everthing was working perfectly.
Thank you very much for all your support.