2009-05-14 5 views
1

Mon HTML est trop eleborate pour poster ici.2ème colonne est en dessous de la 1ère colonne, quelles sont les causes communes de cela?

J'ai une disposition de 2 colonnes, la 1ère colonne est 160px et la 2ème colonne est beaucoup plus grande.

Pour une raison quelconque, la 2ème colonne est en dessous de la 1ère colonne.

Quelles sont les causes communes à cela?

Mise à jour

Ce que je veux est la suivante:

Colonne # 1 Colonne # 2

Qu'est-ce que l'affichage (firefox est ok, IE6 est à l'origine du problème):

Colonne n ° 1
Colonne n ° 2

Mise à jour

La 2ème colonne est enveloppé dans un

Et le blueprintcss a ceci:

.container:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 

Je pense que oui, il est le clair: les deux?

+0

Pouvez-vous préciser ce que vous entendez par «tuck»? Voulez-vous dire que la colonne 2 remplit le conteneur parent lorsque la colonne 1 se termine? –

+1

Capture d'écran s'il vous plaît. –

Répondre

3

supposer que les deux colonnes sont flottaient (à gauche), la deuxième colonne tuck sous le premier si:

  • Il a clear:left; qui lui est attribué
  • il est trop large pour l'espace disponible

Si le problème se produit dans IE 6, il peut s'agir du bug IE 6 3-pixel gap.

(Nous aurions probablement une meilleure chance de vous aider si vous mettez un code réel dans le poste. Pour le moment nous devinons.)

Mise à jour

Je ne pense que c'est clear: both; - cette règle n'affectera pas IE 6, car elle ne supporte pas le pseudo-sélecteur :after. Voici une page de test démontrant qu'il:

http://www.pauldwaite.me.uk/testy.html

+0

Existe-t-il un moyen de remplacer le clearleft? Il utilise blueprintcss qui peut l'avoir par défaut. –

+0

Si votre deuxième colonne est enveloppée dans div.container, non, je ne crains pas. div.container effacera la première colonne (c'est-à-dire, en dessous), et prendra son contenu (c'est-à-dire votre deuxième colonne) avec. –

+0

Attendez, désolé, je dis des bêtises. Le CSS que vous avez posté de BluePrint ne causera pas de problèmes IE6, car il ne fonctionnera pas dans IE 6 (IE 6 ne supporte pas la pseudo-classe ': after'). –

1

En plus de 2 raisons de Paul, vous devez garder à l'esprit IE6 bug "double marge".

Dans IE6, la propriété float double la marge en conséquence (float: left; affecte margin-left et vice versa).

Questions connexes