Firefox incorrectly calculating width/padding of floated div(s)

Dev Shed Forums Sponsor:

February 14th, 2013, 03:09 AM

daz883

Contributing User

Join Date: Jan 2004

Location: UK

Posts: 253

Time spent in forums: 5 Days 17 h 25 m 21 sec
Reputation Power: 10

Firefox incorrectly calculating width/padding of floated div(s)

hi,

I'm having a problem with Firefox. I am trying to create an equal height two column layout (which has a white background behind both columns). I have got this to work in IE9 and the latest version of Google Chrome. However the latest version of firefox is forcing the second column onto a new line. If i take 1px off the "padding-right" measurement for the right hand side column (#sidebar) then firefox works again. However this is not acceptable. The combined width and padding measurements for my two columns (#cargo and #sidebar) are equal to 980px (which is the width of the container div (#container). Why is firefox doing this and how can i fix this without a major overhaul of the code (please see attached screenshot for a visual representation of what is happening in FF)?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Boys Brigade</title>
  <style type="text/css">

    body
      {
      font-size: 11px;
      font-family: Arial, Helvetica, Sans-serif;
      text-align: center;
      margin: 0 0 0 0;
      padding: 0;         
      background-color: #FFFFFF;      
      }
      
    body #page
      {
      /* 1020px */
      width: 92.727em;
      
      margin: 0;
      padding: 0;  
                
      margin-left: auto;
      margin-right: auto;  
      
      text-align: left;
      
      background-image: url('pageBackground.png');
      background-position: top left;
      background-repeat: repeat;            
      }
        
    body #page #container
      {
      /* 980px */
      width: 89.090em;  
                        
      /* 20px */
      margin-left: 1.818em;
      margin-right: 1.818em;
      
      clear: both;   
      
      background-color: #FFFFFF;                           
      }    
              
    body #page #container #cargo
      {
      /* 736px */
      width: 66.909em;

      /* 5px */
      padding-left: 0.454em;
      padding-right: 0.454em;
                              
      float: left;               
      }
      
    body #page #container #sidebar
      {
      /* 229px */
      width: 20.818em;
      
      /* 5px */
      padding-right: 0.454em;
            
      float: right;                  
      }          
        
    p
      {
      /* 12px */
      font-size: 1.090em;
      font-family: Arial, Helvetica, sans-serif;
      }

        
  </style>
  </head>
  <body>
    <div id="page">
      <div id="container">
        <div id="cargo">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div id="sidebar">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div style="clear:both;">
        </div>
      </div>                        
    </div>
  </body>
</html>

Thanks in advance

Attached Images