Serious design help needed

[Nick_Sonick]

Thanks for all your help guys, I think I'm finally getting there!

One problem I have now though - When a customer adds a product to their shopping cart, the text in the sidebox does not fit, and flows out of the side, is there a way to fix this, or is there a way to simply display the number of products in the cart?

Thank you so much.

[gjh42]

You have two major problems.

The first is that you added your header image map above the headerWrapper, essentially bypassing but not completely eliminating the entire stock header functions. In doing this, you have gotten an extra </div> or two in the code, so that #mainWrapper which is supposed to enclose the entire site is ended at the bottom of the original header, and the whole page content is not contained.

The second problem is that you edited a stylesheet declaration without separating out the item(s) you wanted to control. This made everything in the list 900px wide.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

Remove #mainWrapper from the list, as it is styled just above this line and should not be styled twice. If it needs any of these properties, add them to the #mainWrapper {} declaration. The 900px should probably be changed to 100&#37;. Fix the wrapper div problem, and then tackle this one.

[Nick_Sonick]

Thank you again for your help,

I have done what you suggested, but my problem unfortunately remains. I couldn't change the width to 100% because it stretched the whole middle section, so I left it at 900px.

However, the shopping cart sidebox text still spews out of the right hand side, is there anything else I can do?

Thanks again.

[gjh42]

The solution I posted is what is necessary to control that text. You don't need to make #mainWrapper 100&#37; or fluid width, but you do need to separate it from the rest of the list.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

Separate into two declarations and style as required:

#mainWrapper {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

You also have not completely fixed the #mainWrapper premature closure yet, so this CSS will make the page body expand. Rather than try to hide the symptom by calling it 900px, find and remove the extra </div> tag, probably in tpl_header.php. Until you do that, you are asking for random unexplained problems.