Tại sao hai cột của tôi không phù hợp trong IE7?

Question

Tôi tự dạy CSS thông qua sách và trang web. Tôi đã tạo một trang web đơn giản với một hộp được căn giữa theo sau là hai cột và nó hiển thị tốt trong Firefox 3 và Safari 3, nhưng không hiển thị trong IE7. Cột bên phải của tôi nằm bên phải, nhưng được đẩy xuống để nó bắt đầu khi cột bên trái kết thúc. Tôi đã nhìn thấy rất nhiều blog về hack IE, nhưng tôi không biết nên áp dụng điều gì, hoặc nơi nó sẽ được thêm vào trong mã của tôi. Bất kỳ lời khuyên sẽ được đánh giá rất nhiều!

Đây là CSS của tôi:

#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; 
} 

Và đây là HTML của tôi:

<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

Tôi nghĩ rằng bạn đang bỏ lỡ các phao ngay trên #rightcolumn

#rightcolumn { 
    float: right; 
} 

Bạn có thể đặt cũng có thể xóa các giá trị này khỏi #rightcolumn.

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

Answer 2

Đây là những gì tôi đã làm cho ba divs cột (trái, giữa và bên phải là tất cả divs)

cả ba sẽ đi ra là 310px với 10px Inbetween (tổng cộng 950px), bạn có thể điều chỉnh điều này để phù hợp với kích thước của bạn.

Bí quyết là với div ở giữa, về cơ bản sẽ chiếm không gian của toàn bộ 'hàng' nhưng có đủ đệm để xóa nội dung của các div bên trái và bên phải 'phao' trên đầu div trung gian.

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

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

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