stylesheet layout problem with main wrapper

[flyingpuck9]

I am having a lot of trouble with getting part of my site to stay within the #mainwrapper part of my css. The part is the middle which contains the navcolumnleft, center (not sure exactly what it's called), and navcolumn right. These three protrude futher than the main wrapper so it hides the border of my #mainwrapper on the right side. If anyone could help me with this, I would really appreciate it. If you want to look at my site for better understanding, it is www.eighty8threads.com/zencart

thank you in advance

[kobra]

Not sure what you are trying to acheive with some of your settings??
But first you have 2 files that start with stylecheet and have the extention .css and both of these are being used in order...

Get rid of your stylesheet.css or rename it .sav or ??? as long as it is not .css

Rename your stylesheet_custom.css to stylesheet.css then start by finding the following and change these to 0em and see if this assists

#navColumnOneWrapper, #navColumnTwoWrapper {
	margin-left: 0.3em;
	margin-right: 0.3em;
	}

[flyingpuck9]

Well the custom loads up over top of the original one so any descrepencies will be fine being dealt with in stylesheet_custom.

As for those changes, they helped but it still is about 3-4 pixels too big (want it to have the same buffer as the other side). I believe the middle column inbetween #NavColumnone and #navcolumntwo but I don't know a name for it (can't find under my developers tool kit it doesn't say anything.

I think it would work if I knew the name of that middle piece and just set the width to a correct pixel length, but I just don't know the name of that middle box.

[kobra]

You still have not removed the margin as suggested!!!

What you asked is not how this is coded to work

The mainWrapper has a setting as do the L & R columns, the center takes what remains...

If you are trying to have xx space around your L & R columns....
First scrap the margins and also the margins for your header

Go to admin > config > layout settings > find these
Column Width - Left Boxes
Column Width - Right Boxes
and
Column Width - Left
Column Width - Right

Set your column width XX px larger than your box width and this will set the space around them

i.e. make the column width 160px and the box width 150px

[flyingpuck9]

it still does not work. The total layout there is beyond the border. Making it smaller actually made it go out FURTHER beyond the border. I updated it and will leave it like that so you can see what I mean.

[kobra]

Well it is doing exactly what you seem to be telling it to do....
And third time I suggested you remove the margins and they are still there....

You have set the right column to 75px and are trying to display an image that is 100px wide in it

<td id="navColumnOne" class="columnLeft" style="width: 150px">
<div class="leftBoxContainer" id="categories" style="width: 145px">

<td id="navColumnTwo" class="columnRight" style="width: 75px">
<div class="rightBoxContainer" id="whatsnew" style="width: 75px">


/images/Zahm%20Drinking%20Shirt.png
100px wide

Margins:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin:.3em;
	padding: 0m;
	}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
 	} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin-left: 0.3em;
	margin-right: 0.3em;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: .3em;
	background-color: #ff2280;
	background-image: url(../images/tile_back.gif);
	padding: 0.3em .3em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
        width: 880px;
        border: 1px solid #ff2280;
	}