How to combine two divs

Question

I am developing a new website and I have run into a problem. The way I want my navigation bar to work is that it fits in the title (logo bar).

Here is what it currently looks like when encoding:

Here is what I want it to look like this:

This is currently 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.

Answer 3

There is probably a default mark and margin for the elements, which may mean that you should either redefine it, as the first answer with negative fields, specify margin: 0; upholstery: 0; or use CSS reset to avoid this involvement ...

Answer 4

add the following: -

margin-top ; -30px;