CSS Float Working in All Browsers Except IE

I have a website that renders perfectly in Safari, FF, Chrome, and Opera. However, in IE, my website renders slightly off.

HTML:

<div align="center" id="headerdiv"><div id="log"><font id="subtitleAttribs"     onclick="login()">Login أدخل حساب</font></div>
<a class="infoHme"><font id="titleAttribs" onclick="home()">T h e<font color="#999999" size="6px"> | </font>A r t i s a n a t<font color="#999999" size="6px"> | </font>N e t w o r k</font><span>Home دار</span></a>
<div id="lang"><font id="subtitleAttribs" onclick="arb()">العربية</font><font color="#999999"> | </font><font id="subtitleAttribs" onclick="eng()">English</font></div></div>

CSS:

#log
{
  float: left;
  padding: 5px;
}
#lang
{
  float: right;
  padding: 5px;
}
#titleAttribs
{
  color: #6699cc;
  font-size: 26px;
}
#headerdiv
{
  background-color: #faf8cc;
  margin: 0px 45px 0px 45px;
}

In my code snippet there are four parts. First, "headerdiv" is the container. Second, "log" is the div that should be on the left. Third, "titleAttribs" is text that sits in the middle. Fourth, "lang" is the div that should be on the right.

"log" and "lang" float so that they are on each side of the "titleAttribs" text. My problem is that in IE "lang" ends up rendering below "log" and "titleAttribs" on the right. I test my code with a Mac so it is hard for me to test in IE. When I use a PC and run the .html and .css files in IE9, everything renders just fine. However, when I go to my website from the internet, IE has the rendering problem, which makes even more difficult for me to resolve.

Would anyone know an easy way to correct this issue wi开发者_高级运维thout having to make too many changes. I understand that I could add widths, however I tried with no luck. Also, the website url is: http://www.imkenliya.com/artisan_network.html

If you run the website in IE, you will notice that the English language button below the search box is not in the yellow banner to the right of the title, which is the rendering problem.

Thanks,

I figured out my problem through persistent trial and error. Basically, IE read my html differently from the other browsers. By ordering the information in my html page differently, IE was able to render it properly. The ordering follows:

container, div float: left, div float: right, middle info

Originally, I had the following:

container, div float: left, middle info, div float: right

This seemed logical, however not to IE. Additionally, the other browsers still render my html properly.

Use a CSS reset sheet (like this one => http://meyerweb.com/eric/tools/css/reset/).

Also separate styles from your HTML markup (ditch div align="center" and the font tag. Replace them with proper CSS).

If this doesn't solve it, please provide a link to the site.