Div plus petit que son contenu

Bonsoir à tous,

Je débute dans les css et j'ai besoin de votre aide.

voili voilou :
J'ai un div qui en contient deux autres alignés horizontalement. Lorsque sous kompozer je regarde les Balises, je m'aperçois que le contenant est plus petit en hauteur que le contenu !!
Ca n'a aucune incidence sur le résultat final mais pourquoi malgré un heigh en auto ou à 100%, il ne s'agrandit pas au fur et à mesure ??

Merci d'avance pour votre aide

html
<div id="corps">
<div id="corps1"><img alt="" src="cle.gif"></div>
<div id="corps2">
<p>B- Lorem ipsum dolor sit
amet, consectetuer ...</p></div>
</div>

#corps {
  position: relative;
  height: auto;
  clear: both;
  width: 100%;
  
}

#corps1 {
  height: 100%;
  width: 40%;
  position: static;
  float: left;
  clear: both;
}

#corps2 {
  height: 100%;
  position: relative;
  width: 60%;
  margin-top: 61px;
  float: left;
}

Modifié par cabrettologue (18 Jun 2010 - 22:20)

Salut et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Cher modérateur désolé..c'est vrai que c'est plus chouette

Salut,

Voilà un petit tutoriel sur le sujet, et ce qui t'intéresse plus précisement se trouve à la fin de l'article.
Un design fluide avec trois «colonnes», grâce au positionnement flottant

Bonjour et merci pour votre participation.

En fait mon problème n'est pas de mettre 2 div ou 3 div cote à cote mais le fait que le div contenant ne s'adapte pas automatiquement au div "contenu".
Bien sur si je spécifie heigh : 400px c'est bon mais je pense qu'il me manque qq chose(surtout un manque d'expérience) et même dans le lien que vous m'avez fourni, je n'ai pas identifier l'éventuelle solution à mon problème.

Pouvez vous me guider ?
Merci encore pour votre aide,

Bonne soirée

Ps : je joins un dessin de mon pb si je me suis mal exprimé...bien à vous
Modifié par cabrettologue (19 Jun 2010 - 21:19)

Bonjour,

votre problème s'appelle le dépassement des flottants.

Salut,

Une réponse de débutant (ce qui implique que tu ne dois pas prendre ce que je te dis pour argent comptant mais bon, si ça peut t'aider, et puis ça m'exerce).

Les blocs flottants (float) sont "sortis du flux". Cela a pour conséquence notamment de faire que, si ils sont bien "ancrés" dans leur conteneur (ils se déplacent avec lui), ce conteneur se comporte comme si ils n'avaient pas de dimension (ne me demande pas pourquoi, je n'en suis pas à comprendre ce genre de subtilité du W3C...).
Il y a plusieurs solutions pour forcer le conteneur à s'adapter à la taille des éléments flottants qu'il contient. Raphaël a publié à ce propos une "astuce" : http://www.alsacreations.com/astuce/lire/7-depassement-flottants-css.html . Une fois n'est pas coutume, je ne trouve pas ce papier très clair mais les liens sont très intéressants.

Pour ma part je trouve que rajouter une propriété overflow:auto au bloc conteneur est simple et fonctionne bien (il y a sans doute des inconvénients mais je manque de pratique pour les connaître).

Par ailleurs, ton code me semble inutilement compliqué (généré par Kompozer ?).
Pourquoi ne pas appliquer les règles CSS directement aux éléments (sans ajouter des div) ? Un certain nombre de propriétés CSS dans ton exemple n'apportent rien et risquent plutôt de créer des problèmes par la suite... (je les ai mises en commentaire /* */ dans mon code pour les désactiver).

Pour résumer donc :

[code=css]#corps { 
  background-color: ButtonFace;
  position: relative; 
  /*height: auto; */
  /*clear: both; */
  /*width: 100%; */
  overflow: auto;
   
} 
 
#corps1 { 
  background-color: Gray;
  /*height: 100%;*/ 
  width: 40%; 
  /*position: static;*/ 
  float: left; 
  /*clear: both; */
} 
 
#corps2 { 
  background-color: Olive;
  /*height: 100%; */
  /*position: relative; */
  width: 60%; 
  margin-top: 61px; 
  float: left;
}

(j'ai rajouté des couleurs de fond pour visualiser les blocs)
Modifié par redkissifrott (20 Jun 2010 - 10:12)