Overlapping border with CSS - css

Question

I have a webpage header that I am trying to make overlap with a border. Here is a jsfiddle of a simplified version of what I have.
This is what I am aiming for: (The second row of images is what would happen if the page width is reduced.)
I tried using absolute positioning of the green (logo), but this causes the menu (yellow) to overlay with the logo instead of vertically stacking on the page like happens now.
My next idea was to give the border (red) absolute positioning, but in various attempts at that I always seemed to end up with the border at the top of the page, like the header div was ignoring the height of the logo/menu. That was set up something like:
#header {
position: relative;
}
#border {
position: absolute;
bottom: 0;
}
Any suggestions on how to set this up, either fixing what I have or trying a different approach altogether?
Edit:
Here's a better depiction of why I'm trying to do this, using the same colors (why the overlap and why the yellow menu should end up over the logo):

Answer 1

So something like this?
The green block is overlapped by the red border block.
Edit - Added percentage width and #media query so it resizes.
Have a fiddle!
HTML
<div id="header">
<div id="menu">
Contents
</div>
<div id="logo"></div>
</div>
CSS
#header {
width: 100%;
max-width: 700px;
min-width: 320px;
height: 200px;
position: relative;
background: blue;
}
#logo {
background: green;
height: 80px;
width: 190px;
position: absolute;
top: 80px;
left: 40px;
}
#menu {
height: 40px;
width: 300px;
background: yellow;
display: block;
position: absolute;
top: 80px;
right: 0;
}
#media screen and (max-width: 600px) {
#menu {
top: 30px;
}
}
#header:after {
content:'';
height: 80px;
width: 100%;
display: block;
position: absolute;
bottom: 0;
background: #F00;
}