Problème Hauteur DIV
Résolu
Salut, je vais m'expliquer mon problème, j'ai deux <div> l'un conteneur et l'autre c'est un menu situé dans le div conteneur.
Dans la première DIV j'ai mis la propriété de css suivante « height :auto » alors lors de remplissage de ce DIV cette dernière s'allonge automatiquement, jusqu'à ici pas de problème, et j'ai mis la même chose pour l'autre DIV,pas de problème aussi, mais j'ai remarquer que le la hauteur de DIV menu a dépassé la hauteur de DIV conteneur, malgré que le DIV conteneur aurai du s'allongé autmatiquement de façon que la hauteur de DIV menu ne pourra pad dépassé celle-ci.
Comment résoudre ce problème, merci d'avance
Dans la première DIV j'ai mis la propriété de css suivante « height :auto » alors lors de remplissage de ce DIV cette dernière s'allonge automatiquement, jusqu'à ici pas de problème, et j'ai mis la même chose pour l'autre DIV,pas de problème aussi, mais j'ai remarquer que le la hauteur de DIV menu a dépassé la hauteur de DIV conteneur, malgré que le DIV conteneur aurai du s'allongé autmatiquement de façon que la hauteur de DIV menu ne pourra pad dépassé celle-ci.
Comment résoudre ce problème, merci d'avance
5 réponses
-
Je vous remercier tous et voila j'ai trouvé la réponse et j'aimerai partager l'information avec vous c'est juste de mettre:
<div style="clear: both"></div>
au dissous de (DIV menu) -
ContributeurJe n'avais pas bien compris.. :-)
Et je ne crois pas qu'il le veux à droite, mais je peu me tromper.<title>Untitled Document</title> </head> <body> <div id="conteneur" style=" float:auto; width:220px; background:#00C; border:3px inset red;"> <p><strong>DIV conteneur</strong> <br /> ddddddddddddddddddd ddddddddddddddddddddddddd dddddddddddddddddddd ddddddddddddddddddd ddddddddddddddddddddddddd dddddddddddddddddddd</p> <div id="menu" style= "width:120px; height:auto; background:#F00; margin:10px; border:3px outset yellow;"> <strong>DIV menu </strong>sdf gsd fds sdss dsddfdfgsdf fgdfd df sdfsddsf fd sdssfsf sdfs dfd dssff dsf dsgfdf dsfds </div> </div> </div> </body>
Tout s'allonge en fonction des contenus.
A+
Si tu te cognes à un pot et que ça sonne creux, c'est pas forcément le pot qui est vide. ;-)(Confucius)
NOTE : Je ne répond pas aux MP pour les questions techniques. -
ModérateurSalut,
Tu as une div positionnée en float à l'intérieur d'un conteneur. Ca ne fonctionnera donc pas.
Pour obtenir le résulta souhaité, place ta div conteneur en float left :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="conteneur" style="float:left;width: 322px; height:auto; background:#00c;"> <div id="menu" style="float:right; width:100px; height:auto; background:#F00; margin-right:10px;"> <strong>DIV menu </strong>sdf gsd fds sdss dsddfdfgsdf fgdfd df sdfsddsf fd sdssfsf sdfs dfd dssff dsf dsgfdf dsfds </div> <p><strong>DIV conteneur</strong> ddddddddddddddddddd ddddddddddddddddddddddddd dddddddddddddddddddd</p> </div> </body> </html>
-
ContributeurBonjour,
Ton Div menu dois pas être en id mais en class.<div class="menu" ..
A+ -
Bonsoir, c'est difficile de t'aider sans le code.
-
voici un petite exemple il traite le même cas :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="conteneur" style=" width: 322px; height:auto; background:#00C;">
<div id="menu" style="float:right; width:100px; height:auto; background:#F00; margin-right:10px;"><strong>DIV menu </strong>sdf gsd fds sdss dsddfdfgsdf fgdfd df sdfsddsf fd sdssfsf sdfs dfd dssff dsf dsgfdf dsfds </div>
<p><strong>DIV conteneur</strong> ddddddddddddddddddd ddddddddddddddddddddddddd dddddddddddddddddddd</p>
</div>
</div>
</body>
</html> -
-
