title: Why is my division THERE?
body: <p>I have a page with several divisions.  The first 3 take up the entire width of the page from the top down 170px.  This is followed by a line break and then the fourth division, which should be displayed below the previous divisions.  Instead, it is being displayed at the top of the page, underneath the 3 divisions.  I've checked and rechecked to make sure the divisions all close properly, but this isn't the problem.  I will post relevant code below, CSS first and then HTML as I am using a separate style sheet.</p>
  
  <pre><code>#banleft
  {
      padding-top: 20px;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
      float: left;
      text-align: center;
      width: 200px;
      height: 170px;
  }
  
  #bancenter
  {
      padding-top: 20px;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
      float: left;
      text-align: center;
      width: 600px;
      height: 170px;
  }
  
  #banright
  {
      padding-top: 20px;
      margin-top: 0px;
      margin-left: auto;
      margin-right: auto;
      float: left;
      text-align: center;
      width: 400px;
      height: 170px;
  }
  
  #nav
  {
      background-image: url(../media/purplemenubar.jpg);
      background-repeat: no-repeat;
      padding-top: 3px;
      padding-left: 30px;
      padding-right: 90px;
      margin-top: 0px;
      margin-left: 0px;
      margin-right: 0px;
      width: 1150px;
      height: 25px;
  }
  
  &lt;div id="banleft"&gt;Content &lt;/div&gt;
  &lt;div id="bancenter"&gt;Content &lt;/div&gt;
  &lt;div id="banright"&gt;Content &lt;/div&gt;&lt;br&gt;
  &lt;div id="nav" class="cambria3black"&gt;Content &lt;/div&gt;
  </code></pre>
  
  <p>Worth noting:  I've tried removing the class from the final div, but that doesn't help.  Also, when I put actual content inside the "nav" div, it displays in the proper place on the page.  It's just the background image of the division that is floating up to the top and behind the other divisions.</p>