Moving the Left boxes out of the main area

[Catisfaction]

I'm not sure how to describe what I'm trying to do but here goes....

this is what I've done for page layout so far. http://shop.catisfaction.net/index.php

I shifted the main column of the page to the right so that I only have border on one side and added a border image (I know it doesn't go I'm just working on moving things at the moment will make them match later lol)

What I would like to do is shift the logo and the left hand boxes (catagories etc) so that they are on the left hand border instead of inside the main column of the page.

Does that make sense? does anyone have any suggestions of what I would need to change to do that?

TIA

Cat

[kobra]

You are going to have to do quite a bit of css styling to get this look...

Start by increasing the mainWrapper width to a wider fixed width, preferable or a higher %...

You will then have to define widths and float for individual div containers

[rstevenson]

Take a look at either of my sites. I did essentially what you're trying to do, floating my logo top-left, adding a large top-margin to the first element in my left column to force it down below my logo, then getting rid of anything I didn't want at the top of the main column.

I commented my stylesheet a little where I made the critical changes.

Rob

[zest]

adding a large top-margin to the first element in my left column to force it down

Could you give code to how you achieved this please?
TIA

[rstevenson]

Here are the three main elements I styled to push things around. First, lock the logo into the top-left corner...

#logo {
	position: absolute;
	top: 10px;
	left: 10px;
}

Next, move the tagline over to the right...

#taglineWrapper { text-align: right; }

Then, to answer your request, push the left column down to leave room for the logo. In my case, the top element in my left column is the cart summary. You'll have to decide which element to style based on your layout...

#cartsummaryHeading {
	margin-top: 200px;
}

Finally, to let the whole page stay the desired width, but centered in any wider browser window...

#mainWrapper {
	margin: auto;
	top: 0px;
	left: 0px;
 ... other styles here ...  }

HTH

Rob

[zest]

Thank you very much.