не работает margin

[moslem]

Столкнулся с маленькой проблемой, margin не делает отступ сверху, собственно вот

CSS

#header { margin-top:50px; }
a#logo { background:url(images/logo.png); width:166px; height:26px; display:block; float:left; }
ul#social { float:right; margin-top:10px; }
ul#social li { display:inline-block; margin:0 5px; }

#menu { margin:50px 0; clear:both; background:url(images/bgmenu.png); }
#menu li { display:inline-block; padding:15px 0; border-right:1px solid #1A1A1A; margin-right:-4px; }
#menu ul { }
#menu li a  { color:#bbb; text-shadow:0 0 1px #969696; padding:15px 20px; }
#menu li a:hover { background:#262626; padding:15px 20px; }

HTML

 <div id="header">
	<a href="/" id="logo"></a>
	<ul id="social">
		<li><a href="/"><img src="images/icon/rss.png" width="16" height="16"></a></li>
		<li><a href="/"><img src="images/icon/twitter.png" width="16" height="16"></a></li>
		<li><a href="/"><img src="images/icon/facebook.png" width="16" height="16"></a></li>
		<li><a href="/"><img src="images/icon/gplus.png" width="16" height="16"></a></li>
		<li><a href="/"><img src="images/icon/vkontakte.gif" width="16" height="16"></a></li>
	</ul>
 <div id="menu">
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/">Portfolio</a></li>
		<li><a href="/">Gallery</a></li>
		<li><a href="/">Service</a></li>
		<li><a href="/">Blog</a></li>
		<li><a href="/">Contact</a></li>
	</ul>
</div>
 </div>

Edited February 7, 2012 by moslem

[DStereo]

Он просто схлопывается. Попробуйте использовать вместо него padding.