Почему мои два столбца не выравниваются должным образом в IE7?

Question

Я преподаю CSS через книги и веб-сайты. Я сделал простой сайт с центрированной коробкой, за которой следуют два столбца, и он отлично отображается в Firefox 3 и Safari 3, но не в IE7. Моя правая колонка остается справа, но сдвигается вниз, так что она начинается там, где заканчивается левый столбец. Я видел много блогов об IE-хаках, но я не знаю, что применять, или где он должен быть добавлен в мой код. Любые советы будут очень признательны!

Вот мой 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; 
} 

И это мой 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

Я думаю, что вам не хватает поплавок прямо на #rightcolumn

#rightcolumn { 
    float: right; 
} 

Вы могли бы также сможете удалить эти значения из #rightcolumn.

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

Answer 2

Это то, что я сделал за три дивы колонки (левый, средний и правый все дивы)

все три выйдут, чтобы быть 310px с 10px между ними (в общей сложности 950px), вы можете отрегулируйте это в соответствии с вашими размерами.

Трюк со средним div, он в основном занимает пространство всей «строки», но имеет достаточно отступов, чтобы очистить содержимое левого и правого div, которые «плавают» поверх среднего div.

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

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

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