[Résolu] Boite flottante et padding / margin

Bonjour tout le monde

Je suis réguliérement confronté à ces comportements bizarres liés à l'utilisation de padding et de margin sur une boite flottante. Même si on peut parvenir au résultat sans avoir recours à ces propriétés, j'aimerais avoir plus d'explications concernant ces phénomènes (articles, tutos, etc.).

Pour chaque cas j'utilise 2 boites flottantes (gauche / droite) de même largeur (50%) dans un conteneur de taille fixe (500px).

CSS

div#conteneur {
width:500px;
overflow:auto; }

div#boite_gauche {
float:left;
width:50%;
background-color:lightblue; }

div#boite_droite {
float:right;
width:50%;
background-color:burlywood; }

XHTML

<div id="conteneur">
		
     <div id="boite_gauche">
          <p>Lorem ipsum dolor sit amet [...]</p>
     </div>
			
     <div id="boite_droite">
          <p>Maecenas tincidunt pede vitae [...]</p>
     </div>
		
</div>

Ce qui donne au final :




1°) Flottant et padding

div#boite_gauche {
padding:20px; }

Pourquoi le padding va-t-il augmenter la largeur du bloc au lieu d'espacer le texte du bord ?



Une solution pour éviter ça est d'appliquer les marges au paragraphe et non au conteneur (boite_gauche) :

div#boite_gauche p {
padding:20px; }

2°) Flottant et margin

div#boite_gauche {
margin-right:20px; }

div#boite_droite {
margin-left:20px; }

Pourquoi le margin ne permet-il pas d'espacer deux blocs ?



Diminuer le pourcentage (ex : 49%) ou fixer des tailles en pixels (250-20=230px) permet d'éviter le problème, mais reste peu souple (surtout si la taille du conteneur est inconnue).

Connaissez vous un autre moyen d'obtenir proprement un résultat comme ci-dessous ?



J'espère avoir été clair

Merci pour vos reflexions
Modifié par BeliG (20 Jan 2008 - 19:49)

BeliG a écrit :
1°) Flottant et padding

div#boite_gauche {
padding:20px; }

Pourquoi le padding va-t-il augmenter la largeur du bloc au lieu d'espacer le texte du bord ?

C'est le comportement naturel d'un padding: les zones de remplissages créées par le padding augmentent la taille d'une boîte.
Exemple simple: un paragraphe stylé de la manière ci-dessous mesurera au final 150 pixels de large (130 + 10 + 10).

p {width:130px; padding:10px}

BeliG a écrit :
2°) Flottant et margin

div#boite_gauche {
margin-right:20px; }

div#boite_droite {
margin-left:20px; }

Pourquoi le margin ne permet-il pas d'espacer deux blocs ?

Les 2 blocs occupent ensemble 100% de la largeur du conteneur (50% + 50%). Comment pourrais-t-on y ajouter encore 20 pixels? Il n'y a plus d'espace disponible…

BeliG a écrit :
Connaissez vous un autre moyen d'obtenir proprement un résultat comme ci-dessous ?

upload/6853-wantmargin.png

Si le conteneur est de largeur fixe comme dans ton exemple, le plus simple est de figer les largeurs des boites gauche et droite en pixels en fonction de la marge voulue.
Par ailleurs, rien ne sert de faire flotter tes 2 boîtes, mieux vaut faire flotter ta division gauche uniquement et appliquer une marge à gauche adéquate sur la division de droite. Partant de ton exemple, on aura par exemple quelque chose comme ceci:

#conteneur {width:500px; overflow:auto}
#boite_gauche,#boite_droite {width:230px}
#boite_gauche {float:left}
#boite_droite {margin-left:270px}

Bonsoir Benjamin,

Benjamin D.C. a écrit :
C'est le comportement naturel d'un padding: les zones de remplissages créées par le padding augmentent la taille d'une boîte.

J'ai toujours cru que le padding définissait la distance entre le contenu et la bordure du conteneur, sans modification de la taille d'origine

Benjamin D.C. a écrit :
Les 2 blocs occupent ensemble 100% de la largeur du conteneur (50% + 50%). Comment pourrais-t-on y ajouter encore 20 pixels?

Ca confirme ce qu'il me semblait. Mais comme les tailles sont définies en pourcentage, je pensais que le navigateur pourrait de lui même calculer la largeur d'une boite en fonction des marges données...

Concernant ta solution, ça revient à ce que je proposais mais avec une seule boite flottante et la deuxième dans le flux.

En tout cas merci