I'm looking to overlay the driftwood/bomb image on top of the image directly above it in the picture below. I need to eliminate or collapse the "space" between these two div elements. It seems like the gap isn't caused by the markup itself, but rather due to the height difference caused by the bomb image.
My goal is to position the navigation bar at the bottom of the header so that the brown top of the navigation appears just below the header, effectively removing the gap and allowing the images to overlap seamlessly.
I believe this can be achieved using CSS. But how? The solution should work consistently across different browsers.
HTML:
<header></header>
<nav></nav>
CSS:
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}