Css 为什么不'；我的两列在IE7中是否正确对齐？

我通过书籍和网站自学CSS。我制作了一个简单的网站，中间有一个框，后面有两列，它在Firefox3和Safari3中显示良好，但在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>

医生的信条：“首先，不要伤害”
政治家、决策者和公职人员也应该采取同样的行动
正文

把病人放在首位

改革原则
告诉华盛顿的政客们，在评判任何医疗改革提案时，你都将遵循以下原则：

政府没有新的健康保险计划
没有任何一个规模的政府规定一揽子健康福利
没有新的工作岗位会扼杀雇主
不要求个人购买这种昂贵的保险
没有控制私人健康保险的联邦机构
政府不会侵犯我们的医疗隐私
没有联邦政府通过联邦卫生委员会、比较有效性审查和其他政府干预医患医疗决策来控制医疗实践


在请愿书上签名
亲爱的决策者：我与数百万恳求你们遵守不伤害原则的美国人站在一起；不要破坏美国的医疗体系

我想你错过了右边的浮动栏

#rightcolumn {
     float: right;
}

您还可以从#rightcolumn中删除这些值

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

---

这就是我为三列div所做的（左、中、右都是div）

所有三个都将是310px，中间是10px（总计950px），您可以调整它以适合您的尺寸

诀窍在于中间div，它基本上占据了整个“行”的空间，但有足够的填充来清除“浮动”在中间div顶部的左、右div的内容

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

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

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

---

我试图添加浮动：就在之前，但什么也没发生。这次我添加了float:right，并按照您的建议删除了边距，它在IE7中起作用了！而且它在其他浏览器中仍然有效。非常感谢你的帮助！没问题。很乐意帮忙。祝你网站好运：）这就是我要说的！