Block of colour mis-aligning when browser/screen resized

Hi guys,

I've been banging my head against this for the last two days, but it seems I've come to the edge of my knowledge here a little, or just been staring at the screen for too long! I would really appreciate a second opinion :)

The problem:

http://www.adkm.co.uk/problem.gif

The CSS relating to the aforementioned classes/layers:

(note: .main_menu is the class of an unordered list)


.main_menu {
float: left; /* Ensures #colourblock1 is placed on the right-hand side of the menu. */
width: 526px;
height: 100%;
}

#colourblock1 {
width: auto; /* Fills remaining width space after menu. */
height: 100%;
border-top: 4px solid #0D1012;
background-color: #142933;
overflow: hidden; /* Prevents width: auto from filling all of the parent container's width. */
}


I need the menu items to have a transparent background when selected or hovered over (revealing the opacitised background beneath), so I can't just set #colourblock1's width to 100% as that'd give the entire menu a background colour of #142933.

I've also tried ditching #colourblock1 and setting the width of the menu (unordered list) to 100%, but again I would have to set it's background to #142933 which screws with the menu item transparency, along with their horizontal alignment.

Not sure what to do, except make some wishes for CSS4:

1. Enable background-color: transparent to x-ray to lower layers, for example:

z-index: 0 - #main_content_background (opacitised background)
z-index: 1 - #colourblock1 (width 100%, background-color: #142933)
z-index: 2 - .main_menu (unordered list, stacked on top of #colourblock1)

...then perhaps target the layer you want to peer into, using something like this:

.main_menu a:hover { background-color: transparent xray('#main_content_background'); }

Or...

2. Enable the inner background area to be controllable, for example:

#a_box {
width: 1000px;
height: 1000px;
background-color: white;
inner-background: col('2,526px,*'), row(''), color('transparent,#142933');
}

...number of columns (2), width for the first column (526px), the second one would fill the remaining space (*). The row dimensions would be in height.

Thank you