Displayed layout width doesn't match coded width (drupal site)

Question

I'm working on a drupal website with a fixed-width div layout. Everything lines up and etc., but for some reason the whole thing is about 15px wider than it should be. The width should be 900px but shows up as something like 915px. It's even stretching the background image of the header div. This happens in Firefox, not IE (for who knows what reason), and I am using the standard box model. Is there something that the drupal elements could be doing? I've been trying to resize children like crazy in Firebug but nothing seems to be working. The only thing I can think of from this point is to leave it as it is or start all over. Any help would be greatly appreciated.

Page template HTML:

<div id="container">
    <div id="content-supheader"><?php print fiberop_user_bar() ?></div><!-- calls #content-supheader div -->
    <div id="content-header"></div>
    <div id="content-subheader"><?php print $breadcrumb; ?></div>
    <div id="content-body">

     <!-- Start left column -->
     <div class="square">
      <?php print $left; ?>
     </div>
     <!-- End left column -->

     <!-- Start middle column -->
     <div id="middle">
      <?php if ($mission): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>

      <div id="content">
      <?php if ($title): ?><h1 class="title"><?php print $title; ?></h1><?php endif; ?>
      <?php if ($tabs): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
      <?php if ($show_messages): print $messages; endif; ?>
      <?php print $help; ?>

      <?php print $content; ?>
      </div>
     </div>
     <!-- End middle column -->

     <!-- Start right column -->
     <div class="square">
      <?php print $right; ?>
     </div>
     <!-- End right column -->

    </div>
    <div id="content-footer">
    <?php if ($footer_message || $footer) : ?>
    <div id="footer-message">
        <?php print $footer_message . $footer;?>
    </div>
    <?php endif; ?>
    </div>

</div>

Actual rendered HTML (sorry it's such a mess):

<div id="container">
    <div id="content-supheader">Not logged in.</div><!-- calls #content-supheader div -->
    <div id="content-header"></div>
    <div id="content-subheader"></div>
    <div id="content-body">


     <!-- Start left column -->
     <div class="square">
      <div id="block-menu-primary-links" class="block block-menu">
  <h2>Navigation</h2>

  <div class="content">
    <ul class="menu"><li class="leaf first"><a href="/" title="" class="active">Home</a></li>
<li class="leaf"><a href="/content/news-and-events" title="News and Events">News and Events</a></li>

<li class="expanded"><a href="/node/6" title="">Corporate</a><ul class="menu"><li class="leaf first"><a href="/content/history" title="History">History</a></li>
<li class="leaf"><a href="/content/company-personnel-listing" title="company Personnel Listing">company Personnel Listing</a></li>
<li class="leaf last"><a href="/content/company-policies" title="company Policies">company Policies</a></li>
</ul></li>
<li class="leaf"><a href="/content/customer-support" title="">Customer Support</a></li>
<li class="expanded active-trail"><a href="/content/overview" title="">Products and Services</a><ul class="menu"><li class="expanded first active-trail"><a href="/content/customer-brochures" title="">Customer Brochures</a><ul class="menu"><li class="leaf first"><a href="/content/sales-brochures" title="">Sales brochures</a></li>
<li class="leaf last active-trail"><a href="/" title="" class="active">User guides</a></li>
</ul></li>

<li class="expanded"><a href="/content/products" title="">Products</a><ul class="menu"><li class="leaf first"><a href="/content/internet-services" title="">Internet Services</a></li>
<li class="leaf"><a href="/content/ -international-prepaid-phone-card" title="  International Prepaid Phone Card">  Int&#039;l Prepaid Phone Card</a></li>
<li class="leaf last"><a href="/content/internet-prepaid-account" title="internet Prepaid Account">internet Prepaid Account</a></li>
</ul></li>
<li class="expanded last"><a href="/content/services" title="">Services</a><ul class="menu"><li class="leaf first"><a href="/content/local-phone-service" title="Local Phone Service">Local Phone Service</a></li>
<li class="leaf"><a href="/content/long-distance-call-and-fax" title="Long Distance Call and Fax">Long Distance Call and Fax</a></li>
<li class="leaf"><a href="/content/digital-cable-television" title="Digital Cable Television">Digital Cable Television</a></li>
<li class="leaf"><a href="/content/digital-gsm-wireless" title="Digital GSM Wireless">Digital GSM Wireless</a></li>

<li class="leaf"><a href="/content/enhanced-calling-services" title="Enhanced Calling Services">Enhanced Calling Services</a></li>
<li class="leaf last"><a href="/content/internal-wiring-maintenance-plan-imp" title="">Internal Wiring Maintenance Plan (IMP)</a></li>
</ul></li>
</ul></li>
<li class="leaf"><a href="/content/promotions" title="">Promotions</a></li>
<li class="expanded last"><a href="/node/8" title="">Resources</a><ul class="menu"><li class="leaf last"><a href="/image" title="">Image Albums</a></li>
</ul></li>
</ul>  </div>
</div>
     </div>

     <!-- End left column -->

     <!-- Start middle column -->
     <div id="middle">

      <div id="content">
      <h1 class="title">Welcome to Company Corporate Portal</h1>         
      <div id="node-1" class="node clear-block">



  <div class="meta">


    </div>

  <div class="content">
    <p>Welcome</p>
  </div>

  </div><div id="block-views-news_front-block_1" class="block block-views">

  <div class="content">
    <div class="view view-news-front view-id-news_front view-display-id-block_1 view-dom-id-1">




      <div class="view-content">
      <table class="views-view-grid">
  <tbody>
                <tr class="row-1 row-first">
                  <td class="col-1">

  <div class="views-field-title">
                <span class="field-content"><a href="/content/article-picture" title="Article with Picture" alt="Article with Picture">Article with Picture</a></span>
  </div>


  <div class="views-field-created">
                <span class="field-content">October 6, 2009, 11:02 am</span>
  </div>

  <div class="views-field-teaser">
                <div class="field-content"><p><img height="100" width="150" align="left" src="/sites/default/files/DSC_0570.JPG" alt="" />This is a test of an article with a picture.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</div>
  </div>
          </td>

                  <td class="col-2">

  <div class="views-field-title">
                <span class="field-content"><a href="/content/company-article" title="company article" alt="company article">company article</a></span>
  </div>

  <div class="views-field-created">
                <span class="field-content">September 30, 2009, 12:14 pm</span>
  </div>

  <div class="views-field-teaser">

                <div class="field-content">Article text</div>
  </div>
          </td>
                  <td class="col-3">

  <div class="views-field-title">
                <span class="field-content"><a href="/content/company-article2" title="company-article2" alt="company-article2">company-article2</a></span>
  </div>


  <div class="views-field-created">
                <span class="field-content">September 30, 2009, 12:07 pm</span>
  </div>

  <div class="views-field-teaser">
                <div class="field-content"><p>Article text...</div>
  </div>
          </td>
              </tr>

      </tbody>
</table>
    </div>






</div>   </div>
</div>
      </div>
     </div>
     <!-- End middle column -->

     <!-- Start right column -->

     <div class="square">
      <div id="block-user-0" class="block block-user">
  <h2>User login</h2>

  <div class="content">
    <form action="/content/welcome-company-corporate-portal?destination=node%2F1"  accept-charset="UTF-8" method="post" id="user-login-form">
<div><div class="form-item" id="edit-name-wrapper">
 <label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>

 <input type="text" maxlength="60" name="name" id="edit-name" size="15" value="" class="form-text required" />
</div>
<div class="form-item" id="edit-pass-wrapper">
 <label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
 <input type="password" name="pass" id="edit-pass"  maxlength="60"  size="15"  class="form-text required" />
</div>
<input type="submit" name="op" id="edit-submit" value="Log in"  class="form-submit" />
<div class="item-list"><ul><li class="first"><a href="/user/register" title="Create a new user account.">Create new account</a></li>
<li class="last"><a href="/user/password" title="Request new password via e-mail.">Request new password</a></li>
</ul></div><input type="hidden" name="form_build_id" id="form-205b20d5edaf8893b9321c6fd3c147fd" value="form-205b20d5edaf8893b9321c6fd3c147fd"  />

<input type="hidden" name="form_id" id="edit-user-login-block" value="user_login_block"  />

</div></form>
  </div>
</div>
     </div>
     <!-- End right column -->

    </div>
    <div id="content-footer">
     <div id="footer-message">
        <div id="block-user-3" class="block block-user">
  <h2>Who's online</h2>

  <div class="content">
    There are currently <em>0 users</em> and <em>0 guests</em> online.  </div>

</div>
    </div>
     </div>

</div>

CSS:

body, div {
    margin: 0;
    padding: 0;
    }
body {
    background-color: #05142D;
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.3em;
    margin: 0 auto;
    text-align: center;
    }
#container {
    width: 900px;
    margin: 0 auto;
    text-align: left;
    clear: both;
    }
#content-supheader {
    background-color: transparent;
    color: #FFF;
    font-size: 0.9em;
    height: 15px;
    width: 890px;
    padding: 5px;
    }
#content-supheader a, #content-supheader a:link {
    font-family: Verdana, Arial, sans-serif;
    }
#content-header {
    background-color: #CFCFCF;
    background-image: url("pnccheader.jpg");
    background-repeat: no-repeat;
    color: #FFF;
    font-size: 0.9em;
    height: 150px;
    width: 900px;
    padding: 0;
    margin: 0;
    }
#content-subheader {
    background-color: #000;
    color: #FFF;
    font-size: 0.9em;
    height: 15px;
    width: 890px;
    padding: 5px;
    }
#content-body {
    background-color: #FFF;
    height: auto;
    width: 900px;
    padding: 0px;
    overflow:hidden; /* overflow: auto; causes grayed-out x and y scrollbars to appear */
    }
.square {
    background-color: transparent;
    /* border: 1px solid #000; --> if border are used, must correct height & width of div for height & width of border, otherwise divs get pushed down */
    width: 190px; /* ~13 extra pixels that show up from somewhere! From block? */
    float:left; /* alternately display:inline; can be used, but divs wrap in FF */
    font-size: 0.9em;
    /* overflow: hidden; */
    padding: 5px;
    }
#middle {
    background-color: #FFF;
    border: 1px solid #C0C0C0;
    float:left;
    font-size: 0.9em;
    height: auto;
    width: 458px;
    margin: 5px 0px;
    padding: 10px;
    /* overflow: scroll; */
    }
#content-footer {
    background-color: transparent;
    background-image: url("bottomBG2.jpg");
    background-repeat: no-repeat;
    color: #FFF;
    font-size: .9em;
    height: auto;
    Width: 890px;
    padding: 5px;
    padding-top: 40px;
    text-align: center;
    }
#content-footer * h2, #content-footer * h3 {
    font-size: 1em;
    }
#content-footer ul {
    list-style: none;
    display: inline;
    }
h1 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 2em;
    display: inline;
    }
h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5em;
    display: inline;
    }
h3 {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1.5em;
    display: inline;
    }
h4 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1em;
    display:inline;
    }
h5 {
    display:inline;
    }
hr {
    background-color: #000;
    color: #000;
    height: 1px;
    }
ul li {
    font-family: Verdana, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    }
ul ul li {
    font-family: Verdana, Arial, sans-serif;
    }
a, a:link {
    color: #336699;
    text-decoration: none;
    }
a:visited {
    color: #336699;
    text-decoration: none;
    }
a:hover {
    color: #003366; /*800080 = nice purple*/
    text-decoration: underline;
    }
a:active {
    color: #003366;
    text-decoration: none;
    }

Answer 1

I can't say why that's happening, but have you tried the Web Devloper extension for FireFox? If you go into the "CSS" menu then choose "View Style Information", you may be able to get some extra details about what styles FireFox thinks apply to the elements in question.