Shrinking centre column and adding sidebox margins

Hi everyone. I have a few things I need to achieve and they will be evident once you view my site (link below).

1. I want to decrease the centre column width to 550px whilst maintaing the left and right columns at the stock 150px

2. I want to pad/margin the left column from the left of my page, and my right column from the right of my page. I managed to get the left column to do what I want by adding margin-left: 25px; to my stylesheet. Cant figure out how to do it on the right though.

3. after adding the margin to my left sidebox container, its now overlapping the centrecolumn text. I want to fix that.

Thanks in advance.

https://www.sgtpepper.com.au/store/

(basically im making this store appear the same as my original site - https://www.sgtpepper.com.au)

The width of the centre column is what's left over after the side columns have been subtracted from the site width. So to achieve what you want, you will need to make the side columns wider, even if you choose not to fill all the wiodth with content.

remove 25px margin that you have added to your style.

then go to admin
Configuration > Layout Setting .

then set both
Column Width - Left
Column Width - right

to 200px . this should fix the margins and wont overlap on centre column .

hope this helps.

The center column takes whatever width is left after the sidebars display, so set the #mainWrapper width to the desired total of center + sides.

You added margin-left: 25px; to
.leftBoxContainer {
border: 0px solid #FCF9C6;
margin-top: 0em;
margin-left: 25px;
}

so you can do the same (reversed) for .rightBoxContainer.

The reason for the overlap is that you have specified the sidebars to be 150px wide, then you want the sideboxes to be 150px wide plus a 25px margin and still fit in the sidebar. They won't do it - they spill over. Make the sidebars equal the total including box margins.

Thanks everyone. That worked like a charm.

Now, to add 10px margin to the top of my banner I altered the following style.

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

It worked, but I was just wondering what the proper way of seperating this is if I just want to add 10px to the headerWrapper tag and not all those other tags?

Thanks very much for the prompt help.

Brendan

#headerWrapper {
    margin: 10px 0 0 0;
    padding: 0em;
    }

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

Thanks heaps for that.

Brendan