Mauvais float déformation dans IE7

Question

voici test page, qui a l'air différemment dans IE7, alors que dans Firefox & Opera.
On dirait FF & Oprah sont adéquates sur

.twoColLiqRtHdr #mainContent { 
    margin: 0 20px 0 10px; 
} 

marge de droite et le texte lieu en conséquence (texte remplit l'espace sous la barre latérale), tandis que IE utilise la bordure gauche # barre latérale comme marge, et, par conséquent, que l'espace est non utilisé.
Editer: Voici ce dont il est question dans une belle image: link.
S'il vous plaît, aidez-moi à le réparer.

Answer 1

Retirez le zoom: 1 du #mainContent.

Je sais que vous avez ajouté que pour contourner les bogues IE en premier lieu, mais vous devrez trouver une autre façon de le faire si vous voulez aussi que le contenu principal entoure le flotteur. Peut-être pouvez-vous l'ajouter pour sélectionner des éléments dans le contenu principal.

Voir le paragraphe intitulé "Elements next to floats" dans le fameux article "On having layout".

Answer 2

Avez-vous essayé d'ajuster la marge de #sidebar1 à 0, particulièrement en bas? Ou flottant il est parti au lieu de droite? Voir, je ne suis pas une faille dans CSS-hacking pour IE mais probablement cela vous permettra de voir si l'erreur vient. probablement utiliser tout mon temps css-bidouille favori quand il vient à IE7, parfois, il fait des merveilles pour moi:

* html div { 
margin: 0; 
padding: 0; 
}