28172 sujets

CSS et mise en forme, CSS3

Dépassement inexpliqué d'une boite

Bonjour à tous,

j'ai besoin d'imbriquer deux boites dans 1 conteneur, celle de gauche dépasse en bas, je ne vois pas ou est mon erreur dans le code...

<html>
<head>
<style>

.conteneur {
width:90%;
height:500px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
border:solid 1px;
}

.boitegauche{
float:left;
border:solid 1px;
width: 29%;
height:500px;
background-position: top right;
/*background-image:url("fondinfo2.jpg");*/
padding:2em;
text-align:center;
font-family:arial;
font-size: 0.9em;

}

.boitedroite{
float:right;
width: 64%;
height:500px;
background-position: top left;
/*background-image:url("fondpraticiens.jpg");*/
border:solid 1px;
}

</style>
</head>
<body>


<div class="conteneur">
  <div class="clear"></div>
  <div class="boitegauche"></div>

  <div class="boitedroite">Boite droite</div>
</div>

</body>
</html>


Si quelqu'un voit ou est l'erreur...
Merci d'avance

A+
Philippe
Merci pour ta réponse,

j'ai déjà consulté ces articles et si je poste ici c'est que je n'ai pas trouvé de solution (mais je débute et des tas de choses ont du m'échapper) et je compte sur vos âmes charitables pour m'aider à progresser Smiley cligne

En pratique, dans l'exemple que je cite dans mon post, j'ai du mal à comprendre comment une boite de 500px de haut dépasse de son conteneur lui même de 500px, et que la seconde boite, toujours de 500px ne dépasse pas, elle ???? Smiley eek

A+
Philippe
Euhm...
Question bête : à quoi sert <div class="clear"></div> exactement ?

Parce que si elle doit servir à contrer le problème soulevé par Mikachu, elle devrait peut-être se trouver en dessous des flottants, non ? Smiley rolleyes
Modifié par Corinne S. (19 Jan 2010 - 16:26)
Aurais-tu une page en ligne, il serait bien plus simple de constater et d'identifier le problème. L'inconvénient avec les CSS, c'est qu'un style défini quelque part peut perturber la mise en forme ailleurs que là ou tu le pense, donc la page permet une bien meilleure vision du cas. Smiley cligne
Bonjour corinne,

le class="clear" est là par une malencontreuse erreur de copier coller afin de générer le petit bout de code que j'ai mis en exemple, désolé, il n'a rien à faire là mais sa présence n'est pas un problème la classe "clear" n'ayant pas été définie.

Mikachu, non la page n'est pas en ligne mais le petit bout de code est aisé à tester, pas d'image à associer etc... Je ne comprend vraiment pas comment deux blocs définis de hauteur identique et ne contenant rien apparaissent à l'écran de taille différente Smiley eek Smiley eek

A+
Philippe
Bon, bah en fait j'ai trouvé,

c'est le padding:2em; qui fiche le b...
en remplaçant par "padding-left:2em;" tout rentre dans l'ordre Smiley lol

J'y suis depuis hier soir (à temps partiel Smiley lol Smiley lol )

Merci à tous
A très bientôt pour d'autres problèmes qui ne vont sans doute pas tarder...

A+
Philippe
Sujet clos
Aller à