title: my divs won't align correctly. why?
body: <p>This webpage looks fine in dreamweaver but when I view it in any browser, 3 columns are not inside wrapper2 id.  It doesn't even show up. I can't figure out why. </p>
  
  <p>This is my HTML code</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="header"&gt;
              &lt;div id="menu"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="wrapper2"&gt;
              &lt;div id="leftpane"&gt;&lt;/div&gt;
              &lt;div id="bodycontent"&gt;&lt;/div&gt;
              &lt;div id="rightpane"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>here is css</p>
  
  <pre><code>#wrapper {
      width: 900px;
      background-color: #666;
      margin-right: auto;
      margin-left: auto;
  }
  #wrapper #header #menu {
      background-color: #00F;
      height: 50px;
      width: 900px;
      position: relative;
      top: 150px;
  }
  #wrapper #header {
      background-image: url(../images/index_03.gif);
      height: 200px;
      width: 900px;
  }
  #wrapper2 {
      position:relative;
      width:900px;
      background-color:#999;
      height:auto;
  }
  #leftpane {
      width:200px;
      height:347px;
      background-color:#C96;
      left:0px;
      top:0px;
      margin:5px;
      float:left;
  }
  #rightpane {
      width:200px;
      height:347px;
      background-color:#C96;
      margin:5px;
      float:right;
  
  }
  #bodycontent {
      width:400px;
      margin:5px;
      height:347px;
      background-color:#C96;
      float:left;
  }
  #footer {
      width:900px;
      height:80px;
      background-color:#0C6;
  }
  </code></pre>
  
  <p>Please can someone help me on this?</p>