Why don't my two columns align properly in IE7?

Question

I'm teaching myself CSS through books and websites. I've made a simple site with a centered box followed by two-columns, and it displays fine in Firefox 3 and Safari 3, but not in IE7. My right column stays on the right, but is pushed down so that it starts where the left column ends. I've seen a lot of blogs about IE hacks, but I don't know which to apply, or where it should be added in my code. Any tips would be greatly appreciated!

Here is my 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;
}

And this is my 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 oath</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/"&gt;&lt;/iframe&gt;
</div>

Answer 1

I think you're missing the float right on #rightcolumn

#rightcolumn {
     float: right;
}

You might also be able to remove these values from #rightcolumn.

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

Answer 2

This is what I have done for three column divs (left, middle, and right are all divs)

all three will come out to be 310px with 10px inbetween (totalling 950px), you can adjust this to fit your dimensions.

The trick is with the middle div, it basically takes the space of the entire 'row' but has enough padding to clear the contents of the left and right divs that 'float' on top of the middle div.

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

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

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