Help with moving my css Menu

[PurpleKat]

Okay. I'm aiming for a layout which is straight down the middle, with whitespace either side. The colours, font, html coding aren't final, I'm just playing about with the layout.

What I want it to do:

I want a three-column layout - a bit like the wordpress layout on Dreamer.

What I want to achieve right now

I want to have three columns:

|Navigation| Main Content | Featured Content|

buffered by whitespace on either side.
I'm currently working on the first two columns. However try as I might I cannot get the navigation column "into" the greenbanded bit in the middle.

Here's my css document - am I missing something vital here?

Code: Select all

/*  
Theme Name: KWO New design
Description: Green KWO Theme. Tri-Column Layout
Author: Hattie Collingham
Author URL: http://www.dreamer-in-exile.co.uk
*/

/* Body, Logo, Content */

body { background: #FFFFFF; color: #FFFFFF; margin: 0; padding: 0; font-family:verdana; font-weight:none; font-size:12px;}
div {border: 0px solid #FFFFFF;}

#content { color: #FFFFFF; background-color: #365943; margin: 0 auto; width: 750px;  }


#header {
margin-bottom: 2px;
width: 750px;
height: 175px;
border-bottom: 1px solid #7AA48C;
background-repeat: no-repeat;
background-image: url('images/header.gif');
background-color: #365943;
}

/* End Body, Logo, Content */


/* Navigation, Searchbox, Main section, Newsletter Box */

#navigation { width: 150; height: 30px; background: #FFFFFF; margin-bottom:15px; }


#navstuff {position: absolute; top: 10em; left: 2%; width: 23%; background:transparent; padding: 0; margin: 1em; border-width: 0; font-style:normal; font-variant:normal; font-weight:normal; color:#000000;}
#navstuff div {margin-bottom: 1em;}
#navstuff a {background-position: 0%; display: block; margin: 0; padding: 0.33em; letter-spacing: 1px; text-align: right; font-weight: bold; border-bottom: 1px solid #365943; color: #000000; text-decoration: none; background-image:url('none'); background-repeat:repeat;}
#navstuff a:link {color: #000000; background:#7AA48C; width: 95%;}
#navstuff a:visited {background:#7AA48C; color:#000000;}
#navstuff a:hover {background:#FFFFFF; color:#000000;}


#main a {font-family: verdana; font-style:normal; font-variant:normal; font-size:12px;}
#main a:link {color:#FFFFFF; font-size:12px; font-weight: underline;}
#main a:visted {color:#FFFFFF; font-size:12px; font-weight: none;}
#main a:hover {color:#000000; background-color: #FFFFFF; font-weight:underline;}

h1 {
font-family: verdana; font-size:16px;
}

h2 {
font-family: verdana; font-size:14px;
}

h2 {
font-family: verdana; font-size:12px;
}

I'm not looking for any critique of my coding currently, I'm just wanting to get the navigation in place.
Any help would be gratefull recieved.
Thanks

I have attatched a screencap of how it is currently, if that's of any use.

[ukgeoff]

I'm a little confused here. In one sentence you say that the menu is on the left and in another that you can't get it into the grenn bit in the middle.

Can you make things a bit clearer and if possible put the page somewhere live so see we can see it.

[PurpleKat]

It is on the left, currently. Although I didn't actually specificy that in my post.
What I did say was that I wanted it in three columns with whitespace either side, so I guess maybe you could have misunderstood that bit.
It's just trying to get it into the green bit in the middle thats got me stuck.

Live Version

[PurpleKat]

It's okay, I believe I've sorted it out now.