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

Posted on 2008-11-14
Medium Priority
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" "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

Question by:tolvor
1 Comment
LVL 43

Accepted Solution

David S. earned 2000 total points
ID: 22964188
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


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

831 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