Problème de DIV

Bonjour,

Voici mon soucis du jour.

J'ai une div globale qui englobe 2 div. Ces 2 div doivent être sur la même ligne (enfin c'est ce que j'aimerai, mais ça ne se passe pas comme ça)

J'ai essayer de mettre un overflow hidden sur la div globale associé à un clear left et clear both, mais rien ne se passe. J'ai la 2ième div qui se positionne en sous la première.

Voici un extrait de mon code

<div id = "menu">
	<div id = "menu_topnav">
		<ul id="topnav">
			<li>
				<a href="index.html" class="nav_78">accueil</a>
			</li>
			<li>
				<a href="menu1.html" class="nav_117_arrow">Menu1</a>
			</li>
		</ul>
	</div>
	<div id="social">
		<a id="twitter" href="#"><img src="css/images/twitter.png" alt="Suivez moi sur twitter" title="Suivez moi sur twitter" width="59" height="44"/></a>
		<a id="facebook" href="#"><img src="css/images/facebook.png" alt="Devenez fan sur facebook" title="Devenez fan sur facebook" width="53" height="44"/></a>
	</div>
</div>

Côté CSS

#menu {
	height:44px;
	width:954px;
	margin:0 auto;
	background: url("images/sub_menu_bg.jpg") top center;
	z-index:2;
}
#menu_topnav {
	height:44px;
	width:700px;
}
ul#topnav {
	margin: 0; padding-left: 40px;
	float:left;
	width: 100%;
	list-style: none;
	font-size: 1.3em;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	position: relative;
}
ul#topnav li a {
	float: left; 
	height: 44px;
	line-height: 46px;
	text-decoration: none;
	color : #fff;
	text-align:center;
	font-weight: bold ;
}
#social{
	margin-left :720px;
	height:44px;	
}

Avez vous une idée ?

Salut,

ce n'est pas ul#topnav qu'il faut faire flotter mais #menu_topnav

Au passage je t'invite à (re)lire le modèle de boîte CSS car en mixant width:100% et padding-left: 40px; on risque fort d'avoir des surprises.