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
jswright61Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jswright61Author Commented:
JKlatteCommented:
Why not take a fixed width for the navbar and set the left margin for the content wide enough for some space in between?

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

#content{
     float:right;
     margin: 0px auto 0px 250px;
     padding: 0;
}
GrandSchtroumpfCommented:
It's due to the IE float bug.

It's probably better to left-float your navBar and use a left-margin on your content...
But you'll still have the IE float bug. You can solve that using absolute positioning (but it has some inconvenients):
http://www.serger.biz/ee/2columns/ie_float_bug.html

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.