Using Sandbox, how to position sidebar

Hey all,
I have been building my site using my CSS only, with the sandbox 1.6.2 theme. I have encountered a problem that is limited by my CSS knowledge to overcome. I have set it up such that the wrapper is 100% of the screen because I wanted my header and access to span the whole screen. The content area, I only want 900 px wide, with 200 px of that being devoted to the sidebar.

Unfortunately, I don’t see how I can do that, because it seems that the ‘primary’ and ‘sencondary’ sidebars of sandbox are contained only by the wrapper and body. In the HTML, they follow all of the content. I.e. they aren’t part of the ‘container’ so if I float them, they line up to the edge of the ‘wrapper’ not the ‘container.’

Any idea how I can accomplish want I am trying to do?
I want the 200 px wide sidebar to overlap the 900 px content window, and I will use a 200px margin in the content (or container) window, to make sure that the text flows around the sidebars. Also, if I do accomplish putting the sidebar on the side, how do I get the secondary one to follow it?

Here is the site:
http://withsugarontop.biz

Here is my css so far:

body {
margin:0;
padding:0;
}

#wrapper {
background-image:url(‘http://withsugarontop2.files.wordpress.com/2011/02/wrappersplash3.png’);
background-repeat:no-repeat;
background-position:center top;
background-color:rgb(226,105,159);
margin:0;
padding:0;
}

#header {
width:100%;
height:210px;
background-color:rgb(59,28,18);
background-image:url(‘http://withsugarontop2.files.wordpress.com/2011/02/headerbackground1.png’);
background-position:center;
margin:0;
padding:0;
}

div#header h1 {
margin:0;
padding:0;
}

div#blog-description {
display:none;
margin:0;
padding:0;
}

div#header span {
margin:0;
padding:0;
}

div#header a {
display:block;
width:800px;
height:210px;
background-color:rgb(59,28,18);
background-image:url(‘http://withsugarontop2.files.wordpress.com/2011/02/withsugartitle1.png’);
background-position:center;
background-repeat:none;
text-indent:-1999px;
overflow:hidden;
margin:0 auto;
padding:0;
}

.skip-link {
position:absolute!important;
clip:rect(1px,1px,1px,1px);
}

div#menu {
margin:0;
padding:0;
}

div#access {
width:100%;
height:40px;
background-color:rgb(59,28,18);
margin:0;
padding:0;
}

#access ul {
text-align:center;
list-style-type:none;
line-height:40px;
margin:0;
padding:0;
}

#access ul li {
display:inline;
line-height:40px;
margin:0 0 0 5em;
padding:0;
}

#access ul li:first-child {
margin:0;
}

#access ul a {
text-decoration:none;
line-height:40px;
font-size:24px;
font-family:garamond serif;
color:rgb(238,169,202);
margin:0;
padding:0;
}

#access ul a:hover {
background-image:url(‘http://withsugarontop2.files.wordpress.com/2011/02/highlight1.png’);
background-position:center;
background-repeat:no-repeat;
color:white;
}

#container {
background-color:green;
width:900px;
margin:0 auto;
padding:1em 0 0;
}

THANKS SO MUCH