css hack, make the background of the left 10-200px green - css

Question

-edit- sorry i put in a lot of useless info. In short i want a static div that i can set the left and right of (from top to bottom) which i can fill and it should be on top of my background image but below the text in the sidebar.
long version:
I am hacking something in wordpress. I need the sidebar to have a green background. Theres two problems. 1) Is if i make #secodary green i have a TON of whitespace on the left and it looks wrong (but to the right the menu also looks wrong)
2) I need the color to go to the bottom of the page. I dont know how long a page will get.
I think using a fixed place div that is from X to Y (maybe 80 to 300) green. I just dont know how to do it as my css and html-fu is weak. I'll note that i have a background image but the menu is on white which is coming from something else. I dont know if its from #main (post+sidebar) or #primary(post) since changing primary bg color did change the sidebar menu (i bet the theme is using float somewhere...)
Instead of having that tiny little thing green i want it from the left (where the red starts) to the right where i marked with my poor paint.exe job. Also the green should go all the way down. The black circle in the css shows that it isnt simple to do in css which is why i want to hardcode a green box into it

Answer 1

Ok, here is the simplest way to code a position: fixed; div. (with words and white areas as shown in your paint img)
HTML:
<div id="greenBox">
<p>About us</p>
<div class="white">
</div>
<p>Services</p>
<div class="white">
</div>
</div>
CSS:
body /*jsfiddle only, so you can see the fixed effect*/
{
height: 1000px;
background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
}
#greenBox
{
position: fixed;
height: 400px;
width: 250px;
background-color: #008000;
}
.white
{
background-color: #fff;
width: 90%;
height: 100px;
margin: 0 auto;
}
Example for you here.

Answer 2

I made a JFiddle for you here;
http://jsfiddle.net/sfnGH/
#secondary{
position: absolute;
background: green;
top: 0;
left: 0;
height: 100%;
width: 300px; /*or however long you want it to be*/
z-index: 999; /*So it stays on top. I think that's what you wanted?*/
}
Is that what you wanted?
Edit: As pointed out in a comment to my answer you asked for position: fixed;
Before you decide to use that as a left bar there is at least one thing to keep in mind.
It will stay in the fixed position when scrolling. This means, that if you have a lot of content in the sidebar you would never see the bottom part of it on smaller screens.
For a more thourough explanation of differences in positioning you can check out this link: http://css-tricks.com/1191-absolute-relative-fixed-positioining-how-do-they-differ/
Whatever you decide to use I hope you end up with an awsome site.