28172 sujets

CSS et mise en forme, CSS3

[Résolu] Inline-block et flottants

Bonjour,

Le display:inline block; semble très pratique, mais ne fonctionne plus si j'ai un header nav en float.

Le background-color du header disparait aussi.



    #page{width:80%; margin:0 auto}
    #header{background:orange; }
    #header ul{float:right;}
    #jaune{clear:both; width:40%; display:inline-block; background:yellow;}
    #vert{ width:40%; display:inline-block; background:green;}


<div id="page">
	<div id="header">
		<ul>
			<li>Lorem</li>
			<li>ipsum</li>
		</ul>
	</div>
	<div id="jaune">Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.</div>
	<div id="vert">In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.</div>
</div>


Je déconne quelque part ?

Merci !

Smiley eek
Modérateur
Bonjour,

a écrit :
mais ne fonctionne plus si j'ai un header nav en float.

Cela fonctionne tout aussi bien, mais peut-être attends-tu des chose du inline-block qu'il n'est pas censé faire...

Si on pouvais en savoir plus sur le rendu attendu et le rendu obtenu, on serait plus en mesure de pouvoir aider
Par Toutatis ! Quelle réactivité !

Merci pour ta réponse fvsch :
cela fonctionne nickel avec overflow:hidden. Merci !

Pour répondre à kustolovic :
je transforme une structure de site xtml 1.0 en html5 et j'en profite pour tester inline-block en remplacement des float des colonnes principales. Et comme je souhaite afficher le contenu de la colonne de gauche en bas de celle-ci, Les propriétés de inline-block (dans goetter.fr/livres/css-avancees/) m'ont intéressée.
Modifié par elde (04 Apr 2012 - 12:08)
Sujet clos
Aller à