28218 sujets

CSS et mise en forme, CSS3

Divs qui s'empilent

Bonjour @ tous, j'ai un soucis avec la superposition de div:

Voici le html
Code : HTML


<div id="bande">
  <div id="left">kjhkhj</div><div id="right">&copy; 2006<img src="carres2.gif" align="absmiddle"></div>
</div>


Et ses attributs CSS:
Code : CSS

#bande {background-color:#ECEFF5;}
#left { float:left;}
#right { float:right;}


Voici ce que cela donne
http://siteduzero.com/uploaded_img/168/forum/122134/p1.jpg

Alors que ce que je voudrais c'est que toute ma bande soit de cette couleur, de la facon suivante, mais avec le texte:
http://siteduzero.com/uploaded_img/168/forum/122134/p2.jpg


Et si je met de la couleurs aux #left et #right, sa me color que le fond du texte
Comment faire?
Hello,

il manque un clear: both; (sur ou moins un des divs) sans lequel les divs avec une propriété float dépassent de leur conteneur.
Un clear: both; c'est bien, mais il faut rajouter un élément qui sera porteur de cet attribut, pour faire rentrer les deux divs flottées dans le flux de la div#bande.
Par exemple :

<div id="bande">
	<div id="left">kjhkhj</div>
	<div id="right">&copy; 2006<img src="carres2.gif" align="absmiddle"></div>
	<div style="clear: both;"></div>
</div>


Qu'est-ce que ça donne ?
zimounet a écrit :
Alors je n'ai pas du tout compris la raison pour laquel il fallait faire cela, mais ça fonctionne! Smiley cligne

Les éléments flottés "sortent" du flux de l'élément parent. Du coup on se retrouve régulièrement, si on n'est pas vigilant, avec des blocs conteneurs qui font XX pixels de large et... 0 pixels de haut, tout simplement parce que les éléments enfants, en positionnement flotté, ne sont pas pris en compte dans le calcul de la hauteur du bloc conteneur.

Pour éviter ce problème, on rajoute un élément qui ne sera pas flotté (pour qu'il soit pris en compte dans le calcul de la hauteur de l'élément conteneur), et muni de la propriété clear: both; qui force le retour à la ligne (ce qui lui évite de disparaître en dessous des éléments flottés).
J'ai donné un exemple avec une div, mais ça peut être un paragraphe, une image, un trait de séparation (balise <hr />), etc.
Sujet clos
Aller à