CSS Div rendered differently in IE and FireFox

I have a web site that uses CSS  and Divs to form a Navigation bar on the left (there is a masthead on top). Firefoxs renders the pages correctly (the way I want them) always. IE renders them correctly most of the time. IE overlaps the right division onto the NavBar when a table is too wide to fit in the browser window.
What I want is for the NavBar to always be on the left and the content to be on the right (Definitely do not want the content to drop down below the NavBar). If the content is just text I want the text to wrap to fill whats left of the browser window to the right of the NavBar, if the content is a table that is too wide to fit to the right of the NavBar, I want to see as much of the lable as possible and have a scrollbar at the bottom of the window.
Please note I modified a Dreamweaver template to get the layout and I am not sure exactly what I'm doing, so if there is a better way, please advise.

The CSS definitions of my Divs follow
#masthead{
      margin: 0;
      padding: 10px 0px;
      border-bottom: 1px solid #cccccc;
      width: 100%;
}

#navBar{
      margin: 0 79% 0 0;
      padding: 0px;
      background-color: #eeeeee;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
}

#content{
  float:right;
      width: 75%;
      margin: 0;
      padding: 0 3% 0 0;
}
content goes into the content section.
examples are located here:
http:/sjcsff.org/example1.html
http:/sjcsff.org/example2.html

Thanks

Scott