28219 sujets

CSS et mise en forme, CSS3

Image qui sort d'un <div>

Bonsoir,

J'ai un bloc <div> d'une certaine largeur dans ma page et j'ai mis une image sur le côté gauche (float:left). L'image fait 500px de haut, mais le texte à côté de l'image n'arrive pas jusqu'au fond de l'image. Donc l'image sort du bloc et c'est pas vraiment joli puisque le bloc a une autre couleur de fond que le body.

Voilà le code html:
<body>
<div class="page">
<img src="bord.png" class="bord">
Texte qui se met à droite de l'image
</div>
</body>


Et le css:
body {background:gray}
.page {background:black; width:700px}
.bord {float:left}


Mon but est de faire en sorte que le <div> prenne en compte la hauteur de l'image pour qu'il encadre toute l'image et pas seulement le texte. Est-ce possible?
Salut,
Problème assez classique.
Etant donné que ton image est en positionnement flottant donc sortie du flux
(au même titre que la position:absolute) et pas ton texte ben la hauteur de ton div ne s'adapte pas a la hautreur de l'image mais du texte.
une des solutions les plus adaptées à ma connaissance est l'utilisation d'un <hr> avec la propriété (clear: left ou both si tu préfères) placé juste avant </div>.
Voir http://openweb.eu.org/articles/initiation_float/ pour plus de detail.
Si tu veux faire en sorte que la hauteur de ton hr n'augmente pas trop la hauteur de ton div sous IE, il faut lui attribuer ce code

hr {
display:block;
height: 1px;
margin: 0 !important;
margin: -7px 0;
padding: 0;
color: #ta couleur;
background-color: #ta couleur;
border: 0;
}


Si tu veux des explication tu pourras les trouver sur le forum
Modifié par Hermann (29 Dec 2005 - 20:01)
Merci, bon sinon le plus simple est encore de donner un height à ton div s'il n'est ne doit pas être dynamiquement redimensionnable.

Bonnes fêtes également
Modifié par Hermann (29 Dec 2005 - 20:01)
Sujet clos
Aller à