Impossible d'obtenir le positionnement div correct dans IE7

Question

Je ne peux pas pour le live de me comprendre comment obtenir un élément dans ma mise en page doit être placé correctement dans IE 7. Vous pouvez voir la page ici:

Fonctionne bien dans Firefox, mais si vous regardez dans IE 7, vous verrez la barre latérale est sous le contenu du corps. J'ai essayé tout ce que je pouvais penser (flottant à la fois divs, changer la largeur et la marge/padding pour tenir compte du modèle de boîte IE) mais en vain.

Voici le CSS pertinent:

.content-left { 
width:670px; 
height:auto; 
margin:0 30px 0 10px; 
padding:0; 
float:left; 
} 


.content-right { 
width:240px; 
height:auto; 
margin:0; 
padding:0; 
float:left; 
} 

J'apprécie l'aide!

Answer 1

Ceci est un problème IE classique, combiné avec une mise en page un peu irréaliste.

Vous avez défini votre div peace-main pour avoir la largeur de 100%, donc il n'y a pas de place pour le bon contenu à côté. Dans les navigateurs conformes aux standards, cependant, la div n'a pas de hauteur (car elle ne contient que des éléments flottants), donc ce n'est pas un problème que le bon contenu finisse en dessous. Dans IE7, le div est développé pour contenir son contenu, c'est-à-dire le contenu div gauche, donc il obtient une hauteur, et comme le contenu de droite descend en dessous, il finit également en dessous du contenu de gauche. Il suffit de supprimer width: 100%; du style peace-main.

Answer 2

L'affichage du code CSS serait utile. Essayez d'utiliser "position".

Answer 3

une chose que vous pouvez faire est de définir votre paix principale flotter « gauche » et ont seulement une largeur de 700px (donc il y a assez de place pour la barre latérale)

alors la barre latérale devrait également avoir son ensemble flotteur à « droite »

mais je dirais en fait, vous essayez une de ces méthodes: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Answer 4

@ La réponse de Guffa est correcte dans mon estimation. Je pense que votre page peut également avoir des erreurs de validation qui provoquent une analyse incorrecte. En regardant votre balisage, on dirait que vous aviez voulu que le div.content-right et le div.content-left soient dans le même conteneur div, mais ils ne le sont pas, menant le problème comme l'a souligné @Guffa.

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png

Si elles étaient dans le même conteneur cependant, comme je pense que vous aviez l'intention, ce problème serait résolu aussi. Essayez de fixer cette balise de fermeture supplémentaire div, voir ce que ça fait:

alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg