[Résolu] Float, clear:both, alternative ?

Bonjour,

Désolé pour ce titre pas très clair .

Voilà le code HTML :

		<div id="header">
			<h1><a href="/" title="Revenir à l'accueil">Le <span>Navigosaure</span></a></h1>
			<ul id="navigation">
				<li id="apropos"><a  href="/a-propos/" title="Quelques informations complémentaires sur l'auteur de ce site.">A propos</a></li>
				<li id="carnet"><a href="/carnet/" title="Mes notes à propos des événements récents ayant eu lieu sur la Internet.">Carnet Web</a></li>
				<li id="realisations"><a  href="/realisations/" title="Jetez un oeil sur mes réalisations graphiques et mes articles.">Réalisations</a></li>
				<li id="contact"><a  href="/contact/" title="N'hésitez pas à me contacter !">Contact</a></li>
			</ul>
		</div>

Je voudrais que le titre et le menu soit alignés horizontalement mais qu'un soit à gauche et l'autre à droite.

J'ai donc appliqué un "float:left" à l'un et "float:right" à l'autre. Mais du coup mon div "header" est de dimension 0. Voir ici : http://127.0.0.1/navigosaure2/ où j'applique une bordure jaune à ce div.

Une solution consisterait à rajouter un <span style="clear: both"></span>" mais n'y a t-il pas une autre solution sans rajouter de code HTML ?

Merci.
Modifié par ThomasB (31 Jul 2006 - 17:49)

bonjour,

a écrit :
Voir ici : http://127.0.0.1/navigosaure2/ où j'applique une bordure jaune à ce div.

c'est ton adresse en local ... on ne peut donc pas y acceder ...

Voilà : http://thomas.bassetto.free.fr/plop/

Entre temps j'ai trouvé une solution :

#header:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Bonjour,

Faire une recherche dans le forum sur overflow:hidden et overflow:auto utilisés pour étendre un conteneur à ses éléments flottants.

(La solution ci-dessus est lourde, et non supportée dans IE, pour lequel on recourera au haslayout - faire une autre recherche dans le forum)