Discussion :

[Bisûnûrs]

Bonjour à tous.

La manière dont IE gère la hauteur des éléments me laisse coi.
D'un côté, le conteneur d'un élément flottant voit sa hauteur augmenter alors qu'elle ne devrait pas, de l'autre mon problème.

Voici le code incriminé, rendu au plus simplisme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div style="background:#f00">
   <div style="float:left;width:400px;background:#0f0">
      Texte<br />Texte<br />Texte
   </div>
   <br style="clear:both" />
</div>

Sur Firefox, on voit bien le clear agir et la hauteur de l'élément parent s'ajuste à la hauteur des élément enfants.
En revanche, sur IE (6, 7 et les prochains à venir), l'élément parent ne prend en compte que la hauteur du <br> ...

Si quelqu'un a une solution pour faire entendre raison à ce malheureux ...

[MasterOfChakhaL]

Salut,

A mon avis, le problème, à mon avis, vient du br, car avec un hr, ca marche bien (il faut bien sur revoir les styles).
J'ai essayé pas mal de propriété (position, overflow, margin, height) pour essayer d'imposer un contenu...

Je suppose que le problème vient du fait qu'un br n'introduit aucun élément visuel dans la page et que IE l'ignore donc.

Même l'attribut obsolète clear="both" ne change rien à l'affaire.

Je crois qu'il va falloir assumer de trouver un autre élément pour placer le clear (je trouve que le hr n'est pas si éloigné que ca du br niveau sémantique)

[trotters213]

A y être pourquoi ne pas "recréer" ton propre br par le biais d'un div vide auquel tu donnes simplement une hauteur et que tu déclares en clear:both?
C'est pas mieux qu'un hr auquel tu modifies le style ?

[Bisûnûrs]

A mon avis, le problème, à mon avis, vient du br, car avec un hr, ca marche bien (il faut bien sur revoir les styles).
J'ai essayé pas mal de propriété (position, overflow, margin, height) pour essayer d'imposer un contenu...

Bien joué, ça fonctionne effectivement avec un <hr>, suffit juste de modifier son style.

Même l'attribut obsolète clear="both" ne change rien à l'affaire.

Normal c'est clear="all".

Je suppose que le problème vient du fait qu'un br n'introduit aucun élément visuel dans la page et que IE l'ignore donc.

Ce qui me pertrube le plus, c'est que pour une fois, IE n'assume pas le fait d'ajuster la hauteur de l'élément parent en fonction de ses enfants ...

A y être pourquoi ne pas "recréer" ton propre br par le biais d'un div vide auquel tu donnes simplement une hauteur et que tu déclares en clear:both?

L'intérêt n'est pas de donner une hauteur fixe au <br>, sinon il aurait suffit de donner une hauteur fixe au conteneur. :/
Et justement, la hauteur de l'élément est variable.

[Candygirl]

Ce qui me pertrube le plus, c'est que pour une fois, IE n'assume pas le fait d'ajuster la hauteur de l'élément parent en fonction de ses enfants ...

Il ne le fait pas parce que ton div parent n'a pas le layout. Si tu rajoutes un width de 100% sur ton div englobant, par exemple, ce dernier descendra jusqu'au bas des flottants, même sans clear.

Autrement tu peux appliquer toute propriété qui crèe un nouveau contexte de formatage (float, position abolute, overflow, display table, inline-bloc,...) à ton div conteneur afin qu'il s'étende avec les flottants sans avoir à ajouter un clear.

[Bisûnûrs]

Il ne le fait pas parce que ton div parent n'a pas le layout. Si tu rajoutes un width de 100% sur ton div englobant, par exemple, ce dernier descendra jusqu'au bas des flottants, même sans clear.

Autrement tu peux appliquer toute propriété qui crèe un nouveau contexte de formatage (float, position abolute, overflow, display table, inline-bloc,...) à ton div conteneur afin qu'il s'étende avec les flottants sans avoir à ajouter un clear.

Ca marche en effet si je rajoute un width à mon div conteneur ...

Merci beaucoup pour tes conseils, tu es toujours d'une grande aide.