28172 sujets

CSS et mise en forme, CSS3

Hauteur fluide background et clear

Ca fait plusieurs fois que je bidouille dans le css et plus j'en fais, plus j'ai envie de faire les choses proprement, même si ca prend du temps.

Du coup, je me retrouve face à un probleme très classique que beaucoup ont rencontré je pense mais je cherche la solutino la plus "propre".

Voila, en gros le code


<style>
#conteneur{
	background:#000000;
	width:500px;	
}

#contenu-fixe{
	background:#999;
	width:300px;
	float:left;	
}

#contenu-variable{
	background:#000000;
	width:200px;
	float:left;	
}
</style>

<body>

<div id="conteneur">
	<div id="contenu-fixe">Contenu fixe</div>
    <div id="contenu-variable">Contenu variable</div>
</div>


Donc sans souci, mes div s'alignent l'un à côté de l'autre mais comme j'ai un float, mes div sortent du flux et donc mon conteneur ne s'étend pas en fonction de la hauteur variable de mes div

Du coup, j'y place ensuite un

<div class="clear"></div> avec bien sur le style correspondant (clear:both) mais n'existe t'il pas une méthode plus propre qui évite de placer finalement ce bout de code "inutile" ?
#conteneur:after {
    content : " ";
    height : 0;
    font-size : 0;
    visibility : hidden;
    display : block;
    clear : both;
}


Que de précautions =°
Modifié par Gothor (02 Feb 2012 - 15:39)
Effectivement, je pense pas souvent au after... je vais le plonger dans le fond de ma tête celui la, et effectivement, masse précautions Smiley cligne j'ai souris en voyant le height : 0; font-size : 0; avant le visibility : hidden; Smiley biggrin
Sujet clos
Aller à