CSS: Banner&Menu postions - html

Question

Short sketch of the situation: I'm making a website (obviously :)) and so I've got my header, then my banner and below the banner i've got my menu bar. However, the banner overlaps my header a bit (that's the intention ;)) and now I want to add the menu bar directly below the banner.
Here's my CSS code:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
position: relative;
top: -90px;
background: url(../images/banner.png) no-repeat top center;
height: 210px;
}
.menu {
background: url(../images/menubalk.png) no-repeat top center;
}
The menubar is at the position where i should be if the banner would not have an overlap.
I have just figured something small out, which would probably fix my entire problem. If I were to make my header a box, and then my main content a box (which holds the banner, content and footer) and make all the different things, like the banner children from that box? wouldn't that fix my entire problem while I use the inherit or whatever function?
Thank you in advance!
Kind regards,
David

Answer 1

One way of doing this has been suggested, use relative positioning for the menu element.
For example:
<div class="header_container">
Le Header Container
</div>
<div class="banner">
Le Banner
</div>
<div class="menu">
Le Menu
</div>
and the CSS would look like:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
}
.banner {
background-color: yellow;
position: relative;
top: -90px;
height: 210px;
}
.menu {
background-color: red;
position: relative;
top: -90px;
height: 50px;
}
As a start, here is a fiddle: http://jsfiddle.net/audetwebdesign/9gvTG/
Alternative Method
You can achieve a similar effect by using a negative margin:
.header_container{
background-color: #e5e5e5;
height: 200px;
overflow: hidden;
margin-bottom: -90px; // only need to adjust this property
}
.banner {
background-color: yellow;
position: relative;
height: 210px;
}
.menu {
background-color: red;
position: relative;
height: 50px;
}
The advantage of this approach is that the positioning of the subsequent elements do not need adjusting if you change the header and need to modify the degree of overlap by the banner element.
It is good to be aware of both approaches.

Answer 2

One solution in your case would be to position your menu absolute at bottom:-120px. It's not the most elegant one but it should work.

Answer 3

You should assign a relative position to your menu as well. With same top value as the banner
.menu {
....
....
position: relative;
top:-90px;
}
The space you see is because the menu, in normal document flow, is positioned just below the place the banner is located. (which is shifted 90px up from its real position)
A fiddle here
Instead of your images I used background color
You can place the menu just at the bottom of your banner or where ever you need.
Then remember that element that follows the menu will see the menu in his real position . In this case 90px below.Many solutions to wrap all this issue so wont affect the rest of the page elements.