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

Posted on 2008-11-14
Last Modified: 2012-05-05
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" "">

<html xmlns="">


<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

Question by:tolvor
    1 Comment
    LVL 42

    Accepted Solution

    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:

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

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now