How to overlap two divs

Question

I'm designing a new website and I have come across a problem. The way I want my navigation bar to work is that it blends into the header (logo bar).

Here is what it currently looks like when coded:

Here is what I want it to look like:

Currently this is my CSS:

#header {
margin: 0px auto;
width: 900px;
height: 170px;
background: #000;
}

#navigation {
margin: 0px auto;
width: 920px;
height: 60px;
background: url('images/nav.png');
}

And my HTML:

        <div id="header">

        </div>


        <div id="navigation">

        </div>

Answer 1

you can write like this:

#header {
margin: 0 auto;
margin-bottom:-30px;
width: 900px;
height: 170px;
background: #000;
}

Answer 2

A negative margin or position: absolute will fix your problem.