• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 422
  • Last Modified:

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">
<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) */
  <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>
    <br class="clear" />
    <br class="clearfloat" />
  </div> <!-- pagecontent --> 
  <br class="clear" />
  <br class="clearfloat" />

Open in new window

1 Solution
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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now