Bringing a DIV upwards so it sits behind another DIV

I开发者_如何学Go'm confused here... Here's my site that I'm working on: http://s361608839.websitehome.co.uk/marbleenergy/

The div #main is sitting about 10px below #navigation and I've tried bringing it up 10px by adding:

 #main {
 margin-top: -10px;
 }

Had no luck there unfortunately. I'm learning CSS here, what is it I need to do?

Thanks

using absolute positioning isn't so flexible since you're aligning your div's in hard pixel measure. This will probably cause some error on several browser

Use relative positioning instead, and use top attribute to lift that div up

this is the code

#main{ position: relative; top: -10px; }

Add the following to the #main div

#main {
position: relative;
top:-10px;
}

position: relative; Will position the element relative to where it normally sits and aligning -10px from where it would sit will bring it into the gap you have made in your menu div. Haven't checked your site but can't see any reason why this won't work. I prefer not to set my elements to position: absolute; as the above member answered as any content under the div will be pulled up under the absolutely positioned div.

As the other answer more clearly details, you need to make sure that positioning is absolute, in order for any 'px' CSS specification to make sense, if not, it defaults to relative (to nearest parent container) I believe.

USE

See Demo: http://jsfiddle.net/rathoreahsan/fSDpJ/

I browse your website in your case you need to use the following css:

#main {

    position absolute;
    margin:-10px 0 0 12px;        
}

OR

#main {

    position relative;
    margin:0 0 0 12px;
    top: -10px;        
}