#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    UK
    Posts
    258
    Rep Power
    11

    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
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    UK
    Posts
    258
    Rep Power
    11
    Never mind - ive worked it out. I solved the problem by setting all my "em" measurements to 4 decimals after the point.

IMN logo majestic logo threadwatch logo seochat tools logo