Warum sind meine beiden Spalten im IE7 nicht richtig ausgerichtet?

Question

Ich lehre mich CSS durch Bücher und Websites. Ich habe eine einfache Site mit einer zentrierten Box gefolgt von zwei Spalten erstellt, die in Firefox 3 und Safari 3 gut angezeigt wird, aber nicht in IE7. Meine rechte Spalte bleibt auf der rechten Seite, wird aber nach unten gedrückt, sodass sie dort beginnt, wo die linke Spalte endet. Ich habe viele Blogs über IE-Hacks gesehen, weiß aber nicht, welche ich anwenden soll oder wo sie in meinem Code hinzugefügt werden sollen. Irgendwelche Tipps würden sehr geschätzt werden!

Hier ist meine 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; 
} 

Und das ist mein 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

Ich glaube, Sie den Schwimmer rechts

#rightcolumn { 
    float: right; 
} 

auf #rightcolumn sind vermisst könnten Sie Sie können diese Werte auch aus #rightcolumn entfernen.

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

Answer 2

Dies ist, was ich für drei Spalte divs getan haben (links, Mitte und rechts sind alle divs)

alle drei kommen aus mit 10px sein 310px dazwischen (950px Höhe) können Sie Passen Sie dies an Ihre Abmessungen an.

Der Trick ist mit dem mittleren div, es nimmt im Wesentlichen den Raum der gesamten "Zeile" aber hat genug Polsterung, um den Inhalt der linken und rechten divs, die oben auf der mittleren div "schweben".

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

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

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