position:relative leaves an empty space

Another trick which worked fine for me is to use a negative margin-bottom in the relative element that you have moved. No need to go with absolute positioning.

Something like:

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

Similar (if not identical) to the solution I see now, from green.

Well, don't use relative positioning then. The element still takes up space where it originally was when using relative positioning, and you can't get rid of that. You can for example use absolute positioning instead, or make the elements float beside each other.

I played around with the layout a bit, and I suggest that you change these three rules to:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

#page 
{ 
     overflow:hidden; 
}