Problème de positionnement en CSS

Bonjour,

J'ai un problème avec l'utilisation de CSS pour rendre un menu extensible.

Voici le code HTML :

	<div id="page">
		<div id="header">
			<!-- Choix de la langue -->
			<div id="langage">
				<p>Choisissez votre langue :</p>
                <ul>
                	<li><a href="#"><img src="images/france.png" alt="" /></a></li>
                	<li><a href="#"><img src="images/allemagne.png" alt="" /></a></li>
                </ul>
			</div>

Et voici son code CSS :

#header {
	height:178px;
	position:relative;
}

#langage {
	position:absolute;
	top:-9px;
	left:15px;
	width:auto;
	height:30px;
	background-color:#608ec4;
	-moz-border-radius:6px;
	-o-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

#langage p {
	font-size:10px;
	color:white;
	padding:13px 0 0 10px;
	float:left;
	width:116px;
}

#langage ul li {
	display:inline-block;
	float:left;
	padding:13px 0 0 5px;
}

Le problème est le suivant :

Je souhaite que ma <div id="langage"> adapte automatiquement sa longueur à chaque fois que j'ajoute un élément <li>, de manière à ce que ceux-ci se suivent horizontalement. Si je donne une longueur fixe à ma <div> (exemple : 230px) il n'y a aucun souci, les éléments se positionnent correctement, mais si je lui donne une width:auto, la longueur de ma div s'arrête à la fin de la balise <p>, et mes liens se retrouvent en-dessous.

Comment corriger ce problème ?

Merci d'avance
Frédéric