Pourquoi mes deux colonnes ne s'alignent-elles pas correctement dans IE7?

Question

Je m'enseigne CSS à travers des livres et des sites Web. J'ai fait un site simple avec une boîte centrée suivie de deux colonnes, et il affiche bien dans Firefox 3 et Safari 3, mais pas dans IE7. Ma colonne de droite reste sur la droite, mais elle est enfoncée pour commencer là où se termine la colonne de gauche. J'ai vu beaucoup de blogs sur les hacks IE, mais je ne sais pas lequel appliquer, ou où il devrait être ajouté dans mon code. Tous les conseils seraient grandement appréciés!

Voici mon CSS:

#wrapper { 
position:relative; 
width:900px; 
margin-right:auto; 
margin-left:auto; 
} 

#centerbox { 
background-color:#FFFFFF; 
width:870px; 
margin-left:auto; 
margin-right:auto; 
padding:10px 15px 10px 15px; 
margin-bottom:30px; 
text-align:left; 
border:8px solid #E0BB24; 
} 

#leftcolumn { 
float:left; 
margin-left:10px; 
width:410px; 
padding:0px 10px 10px 10px; 
color:#FFFFFF; 
} 

#rightcolumn { 
width:395px; 
margin-left:480px; 
margin-right:10px; 
padding:0px 15px 10px 10px; 
background-color:#FFFFFF; 
border:1px solid #26A9E0; 
} 

Et ceci est mon HTML:

<div id="centerbox" class="clear"> 
<h1>The physician's creed: &quot;First, do no harm&quot;</h1> 
<h3>Politicians, policymakers, and public officials should take the same oauth</h3> 
<p>Text</p> 
</div> 

<div id="leftcolumn"> 
<h2><img src="images/accept.png" alt="Putting Patients First" align="left"> </img>Putting Patients First</h2> 
<p class="spaceafter"><a href="betterway.html">Read more about our idea of a better way to reform health care by putting patients first &raquo;</a></p> 

<h2><img src="images/reject.png" alt="Principles for reform" align="left"></img>Principles for reform</h2> 
<p class="spaceafter">Tell politicians in Washington you will follow these <a href="donoharm.html">principles</a> in judging any health reform proposal:</p> 
<ul> 
    <li>No new government-run health insurance plan</li> 
    <li>No one-size government-dictated package of health benefits</li> 
    <li>No new jobs-killing mandates on employers</li> 
    <li>No requirement on individuals to buy this expensive coverage</li> 
    <li>No federal institution that controls private health insurance</li> 
    <li>No government intrusion into our medical privacy</li> 
    <li>No federal government control over the practice of medicine through a federal health board, comparative effectiveness review, and other government intrusions into doctor-patient medical decision-making</li> 
</ul> 
<p><a href="donoharm.html">Read more &raquo;</a></p> 
</div> 

<div id="rightcolumn"> 
<h2><img src="images/signpetition.png" alt="Sign the petition" align="left"> </img>Sign the petition</h2> 
<p>Dear Policymaker: I stand with millions of Americans who implore you to follow the Do No Harm principles &mdash; and do NOT destroy America's health care system!</p> 
<iframe height="920px" width="400px" name="zoho-Do_No_Harm_Petition" frameborder="0" scrolling="auto" src="http://creator.zoho.com/galeninstitute/do-no-harm-petition/form-embed/Do_No_Harm_Petition/reAUnSRw7O3sfWaOssaxgN91NbXFRYWUEQ8AZ5v803j2bVG4OHpFAXkvuUuqDVX9zxfg5YMSfMD9TTeqds1OE1kbYQqSSmYbFh6Z/"></iframe> 
</div> 

Answer 1

Je pense que vous manquez le flotteur droit sur #rightcolumn

#rightcolumn { 
    float: right; 
} 

Vous pourriez également être en mesure de supprimer ces valeurs de #rightcolumn.

margin-left:480px; 
margin-right:10px; 

Answer 2

C'est ce que je l'ai fait pour trois divs de colonne (gauche, centre et droite sont tous divs)

trois sortira être 310px avec 10px inbetween (pour un total 950px), vous pouvez Ajustez ceci pour adapter vos dimensions. L'astuce est avec la div du milieu, elle prend essentiellement l'espace de toute la 'ligne' mais a suffisamment de remplissage pour effacer le contenu des divs gauche et droit qui 'flottent' au-dessus de la div du milieu.

#left 
{ 
    float: left; 
    width: 310px; 
} 

#middle 
{ 
    padding: 0px 320px 5px 320px; 
} 

#right 
{ 
    float: right; 
    width: 310px; 
}