Column Issues in Firefox

Alright, I've created a standard, simple 2 column page:
<style type="text/css">
#header { display:block; float:left; width:700px; }
#main { display:table; float:left; width:700px; }
#leftcol { display:inline; float:left; width:200px; }
#rightcol { display:inline; float:left; width:500px; }
#footer { display:block; float:left; width:700px; }
</style>

<div id="header"></div>
<div id="main">
<div id="leftcol"></div>
<div id="rightcol"></div>
</div>
<div id="footer"></div>
Pretty easy, and it works. The problem is in Firefox, SOMETIMES the right column (#rightcol) gets forced down below the left column. The weird thing is, all you have to do is refresh the page and it fixes without changing anything. I've seen things like this happen on other sites too. Any ideas how to stop this?

Got a link?? Take out the display elements as you shouldn't really need those and you should define heights with relation to using widths