Problem with alignment on my product page

Please am having aligment problem if more than 6 items is added to my cart the remaining items moves right down, please find the attached cart view attachment, I dont know why it's not align properly.

I also have alignment problem with these page as well

And I havent edit the css that came with powerstore, the display problem is with IE7, IE 8

thank you for your help

It looks like the cart display has been modified from its default. When I add items to the cart on your site it is not forcing the new item to be added on the next row, also the alignment in the cart is off.

I'm including a screen shot of what I saw in FireFox 3 after adding a few items to the cart. The regular PowerStore cart page does not display in this way. If you have altered the cart display on the page this may be the reason you are seeing these results. Also, I noticed a menu on the left side, it may be possible that the inclusion of this menu is causing some problems. At what point did the display change from it's default behavior?

thanks, i dont think it's because of the left side menu, i've removed the left side menu of the cart, it's still not aligned. And also I havent modified the display cart from it's default. I was testing the site yesterday and that was when i noticed it.

As a further test please try making a new test directory on your site and put the default files for PowerStore into this new test directory, make sure though that you have your current copy of the globals and connection files in here.

With the default files in place perform a test by adding in multiple items to the cart to gage how it displays for you. In my files all items are added as individual rows in the cart, never more than a single item per row.

Thank you, I've uploaded to new directory
and the alignment is fine.

I think the problem might be in the width, the width: 1001px, but i have 7 button so i have to expand the width to width: 1200px;
so what do you think i should do, i cant have 1001px, all the tab botton wont show, or am i meant to adjust something else?

Below is the orriginal common.css that i edited
#outerWrapper {
background-image: url("../Images/outerWrapper_bg.png");
background-repeat: repeat-y;
text-align: left;
width: 1001px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 9px;
padding-bottom: 0px;
padding-left: 9px;
}

Regarding the top horizontal 'tab' menu,

I think things would be a lot easier for you if you had a top-level menu tab simply called 'Store' or 'Our Products' under which all the categories and subcategories reside. This would mean that at any time in the future, you could add categories as required without worrying about the layout of the page.

There are also a large percentage of people (56.15% worldwide, 52.22% USA, 58.90% UK)* whose screen size is 1024px width requiring a max width of around 980(960)px content area to avoid horizontal scrolling.

Having all the main categories showing in the main top-level menu will severely restrict your options if the categories change later on. The sidebar menu could then be used to show the sub-category headings per category/page.

------------------------------------------------
* aboutus_pressbox43-screen-resolutions.html

I think that rather than expanding the layout to accommodate the wider navigation you can just decrease the size of the links in the top nav so that you can fit more of them in place.

The default value is 120px, so the number of entries you have in this menu will be multiplied by 120 for a total width of the menu. If you adjust this size to be smaller you can fit in a larger number of links without increasing the width of the page. You would make this adjustment in the following style:

CSSMenuWriter/cssmw_home/menu.css line 52

ul#cssmw_home > li > span > a {
background-image:none;
color:#FFFFFF;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-style:normal;
font-weight:normal;
height:24px;
margin:5px 0 0;
padding-top:12px;
text-align:center;
text-decoration:none;
width:120px; /*this is the value to adjust*/
}

Just adjust the width to fit your needs. Also if the text is too large for a particular width you can adjust that with the font-size:14px; setting.