div problem

[divinedesigns1]

i have been messing around with a new style of design *new to me* but my logo keep pushing down my header images, and i would like to know how i can make the logo hang over the header and not push the images down or the header div down

<div id="menu"><div id="top" style="width:100%; height:50px; background-color:#090;"><div class="menu" style="width:1024px; height:50px; margin:0px auto; text-align:center;"><div class="nav" style="width:780px; margin:0px auto; height:50px;"><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-left:10px;"><a href="">HOME</a></div><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-left:10px;"><a href="">ABOUT</a></div><div class="img" style="height:208px; color:#fff; width:360px; text-align:center; float:left; margin-left:10px; position:relative;"><a href=""><img src="DDS1 2012 logo.png" width="306" height="208" border="0" /></a></div><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-right:20px;"><a href="">SERVICES</a></div><div class="buttons" style="height:50px; color:#fff; width:80px; line-height:50px; text-align:center; float:left; margin-left:10px;"><a href="">PROJECTS</a></div></div></div></div></div><div id="header" style="width:100%; height:200px; position:relative; z-index:0;"><img src="RA-Banner.jpg" width="1024" height="225" /></div>

the red text are the codes for the logo which is pushing down the header, i used absolute and relative but those did not work for the logo div, instead it moved the div out of placed, any help or tips would be appreciated

[astralaaron]

You could make your menu div position:absolute; top:0; left:0;, make sure it is z-index: above the header div.

[divinedesigns1]

You could make your menu div position:absolute; top:0; left:0;, make sure it is z-index: above the header div.

thanks

[dsonesuk]

Don't use position absolute on menu big headache will like occur, its difficult to understand what you really want? IF you want to make the logo image not occupy any space and not interfere with other menu items, take it out the flow using position: absolute on it instead OR its container parent elements with at least top and left properties defined, BUT you MUST also use position: relative; on #menu to contain it.

 

Edit:

Edited September 17, 2013 by dsonesuk

[divinedesigns1]

Don't use position absolute on menu big headache will like occur, its difficult to understand what you really want? IF you want to make the logo image not occupy any space and not interfere with other menu items, take it out the flow using position: absolute on it instead OR its container parent elements with at least top and left properties defined, BUT you MUST also use position: relative; on #menu to contain it.

 

Edit:

alright, ill try your way once i get home, since astralaaron way worked