Existe-t-il un moyen de largeur 0 pour empêcher les divs flottantes de s’effondrer

Question

Tout d’abord, ce problème ne concerne pas la réduction d’éléments de bloc lorsque leurs enfants sont flottants. En réalité, le problème n’a rien à voir avec le nettoyage.

Le problème est le suivant. Supposons que j'ai une série de divs flottants comme:

<div class="column">Column 1</div>
<div class="column"></div>
<div class="column">Column 3</div>

Avec css:

div.column { float: left; width: 200px; }

La colonne du milieu s’effondrera dans les versions récentes de Firefox et Safari, bien qu’apparemment pas IE7. Ce que je veux, c'est le comportement de IE7.

Je réalise que je peux ajouter un & amp; nbsp; et qu'il maintiendra la div ouverte, mais cela ne fonctionne pas pour moi dans ce cas car j'ai également une déclaration comme celle-ci:

div.column input { width: 100% }

J'ai une série de colonnes dans un format de type tableau, certaines conditions entraînant la disparition des champs de saisie. Le problème est que lorsque l'entrée disparaît, le champ se réduit. Si j'ajoute un & nbsp; , la div est renvoyée à la ligne. Juste pour répondre aux questions initiales:

• Pourquoi ne pas utiliser un tableau à la place? parce que j'utilise Scriptaculous Sortable pour faire glisser des lignes, ce qui ne fonctionne pas avec les tableaux
• Pourquoi ne pas utiliser une largeur de pixel plus courte pour laisser de la place à un & amp; nbsp; ? Car width: 100% est plus précis entre les navigateurs.
• Pourquoi ne pas ajouter un & amp; nbsp; lorsque je cache l'entrée , je risque de finir par y avoir recours, mais ce serait plutôt moche dans le JS, alors j'espère une meilleure solution.

Quelqu'un at-il des astuces intelligentes ici? Puisque Safari et Firefox se comportent de la sorte, je suppose que ce comportement est officiellement sanctionné. Où est-ce discuté dans les spécifications du W3C?

Answer 1

Eh? Ne devriez-vous pas simplement lui donner une hauteur aléatoire? Pouvez-vous montrer une démo?