Web page content not lining up in Firefox at reduced zoom, correct in IE.

I have a web page that does not display correctly in Firefox in a certain condition.  If the page is displayed in Firefox, and the page is zoomed-out (made smaller) by at least one step, the left and right sides no longer line up, but instead display underneath each other. When it is zoomed out it is acting like the content is too wide for the containing block and therefore has to display underneath each other.

However this is where the problem is.  I've done the math on this several times as to how everything fits, and it is coming up correct.  There should be no overlap.  This is confirmed that it does display correctly in regular zoom and zoom-in, if there was a overlap, it wouldn't work at any zoom.  

The math is as follows (also included in code):
/* page width = 766 = (390 + 5 + 1 + 1) + 369   */
/* pagecontent (766) = left_area (390) + left_area's left margin (5) + left+area's left border (1) + left+area's right border(1) + right_area (369) */

This only happens in Firefox, and only when zoom-out (make content smaller) is applied past normal (Ctrl-0)

The question is why is the left and right sides not aligning on Firefox Zoom-out, and how can it be fixed?

Any help would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Problem when page zooms smaller in Firefox</title>
 
<style type="text/css">
 
body {
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
}
 
.pagecontent {
  width: 766px;
  margin-left: auto;
  margin-right: auto;
}
 
.right_area {
  float: right;
  width: 369px;
  display: inline;
  background-color: #0f0;
}
 
.left_area {
  padding-right: 0px;
  margin: 0 0 5px 5px;  
  float: left;   
  width: 390px;
  display: inline;  /* Force has-layout in IE, prevent margin doubling on left */
  background-color: #00f;
  border-color: #000;
  border-style: solid;
  border-width: 1px;
}
 
/* page width = 766 = (390 + 5 + 1 + 1) + 369   */
/* pagecontent (766) = left_area (390) + left_area's left margin (5) + left+area's left border (1) + left+area's right 
 
border(1) + right_area (369) */
 
</style>
</head>
<body>
 
  <div class="pagecontent">
    <div class="right_area">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam eleifend nulla non lorem. Nunc tincidunt 
 
vestibulum enim. In accumsan sem quis arcu. Nam laoreet. Morbi interdum velit et ligula. Nullam orci risus, congue quis, 
 
condimentum dignissim, convallis ac, mauris. Sed vestibulum semper mauris. Phasellus sapien odio, congue at, sollicitudin et, 
 
viverra vel, dolor. Fusce sapien elit, consectetuer at, lobortis vel, gravida et, nisl. Sed lorem metus, varius lacinia, 
 
lobortis in, iaculis ut, quam. Nam est augue, ultrices nec, ullamcorper sed, convallis eget, sem. Nulla ac arcu vitae massa 
 
fringilla imperdiet. Nulla eros. </p>
    </div>  <!-- right_area -->
 
    <div class="left_area">
      <p>Vestibulum lorem. Quisque ultrices, velit ut laoreet facilisis, est mauris sagittis purus, nec venenatis libero odio 
 
ac diam. Ut posuere. Etiam cursus nunc a urna. Donec lorem felis, tincidunt sit amet, vehicula at, vulputate non, justo. 
 
Mauris eget risus. In ornare ultrices quam. In rutrum, lorem sit amet tempor consectetuer, ante lectus adipiscing risus, a 
 
pharetra metus quam sed quam. Quisque id metus. Etiam molestie. </p>
    </div>
 
    <br class="clear" />
    <br class="clearfloat" />
  </div> <!-- pagecontent --> 
 
  <br class="clear" />
  <br class="clearfloat" />
</body>
</html>

Open in new window

tolvorAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

David S.Commented:
That kind of thing happens when you don't give columns a little breathing room.

Try the following style rule.

Do you really need all of those <br>s? I recommend you read this: http://www.positioniseverything.net/easyclearing.html

.right_area {
  float: right;
  width: 369px;
  display: inline;
  background-color: #0f0;
  position: relative;
  margin-right: -3px;
  right: 3px;
}

Open in new window

0

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.