28172 sujets

CSS et mise en forme, CSS3

Slt tout le monde. je rencontre un petit bug d'affichage sur mes css.

j'ai une conteneur
#conteneur {
	position: relative;
	width: 775px;
	margin: 0 auto;
}


Qui contient plusieurs chose dont une colonne gauche
#Colonne_Gauche {
	width: 575px;
	float: left;
	margin-top: 30px;
	margin-bottom: 20px;
}

et une colonne droite
#Colonne_Droite {
	float: right;
	width: 180px;
	margin-top: 30px;
	margin-bottom: 20px;
	text-align: center;
}


Dans ma colonne de gauche je fais afficher des infos sur deux colonne

.ColoneLeft {
	float:left;
	width: 280px;
	margin-right: 20px;
}
.ColoneRight {
	float:right;
	width: 270px;
}


Mon bug est lié au c'est deux colonne.
lorsque ma colonne de droite "coloneRight" est plus petite (en hauteur) que ma colonne de gauche "coloneLeft", le texte que je vais placer sous les deux colonnes vas s'afficher sur la droite de la colone gauche.....

<div id="conteneur">
<div id="Colonne_Gauche">
<div class="coloneLeft">xxxxxxxxxxx</div>
<div class="coloneRight">xxxxxxxxxxx</div>
<div class="Titre">TEXTE QUI BUG A L'AFFICHAGE</div>
</div>

<div id="Colonne_Droite">xxxxxxxxxxxxxxxxx</div>
</div>

Merci de votre aide
Modifié par Kweb (25 Mar 2008 - 17:46)
Bonsoir Kweb,

En premier lieu une piqûre de rappel sur le positionnement flottant : ça pique, mais ça ne fait pas de mal Smiley cligne
http://openweb.apinc.org/articles/initiation_float/
et
http://www.yoyodesign.org/doc/digital-web/web-design-101-floats/
par exemple, et les liens associés Smiley cligne

Ensuite, je ne sais pas s'il s'agit d'une faute de frappe, mais il faut faire attention aux majuscules/minuscules dans ton code, ces différences sont préjudiciables, en terme de rendu final, et d'efficacité (perte de temps, arrachage de cheveux, prise de médicaments...pour retrouver où se situe cette bête erreur...
".ColoneLeft" versus "<div class="coloneLeft">"

Tu ne spécifies rien de spécial sur ta classe "Titre", mais si j'ai bien compris ton soucis, un clear:both sur cette classe te permettra de toujours garder ton conteneur titre sous ces deux flottants.

Voili, voilou, si ce n'est pas clair, n'hésites pas à reposter Smiley cligne

Cdt,
Sylvain