title: Put one div after another
body: <p>I want to set two divs like the following.
  <a href="http://snag.gy/ynuiY.jpg" rel="nofollow">http://snag.gy/ynuiY.jpg</a></p>
  
  <p>This is my HTML code</p>
  
  <pre><code>&lt;div id="topbar"&gt;
  This is a top bar
  &lt;/div&gt;
  
  &lt;div id="wrapper"&gt; 
  wrapper
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS</p>
  
  <pre><code>#wrapper{
      z-index:2;
      marign-top: 30px;
      width:80%;
      height:auto;
      background-color:#FFF;
      left:auto ;
      right:auto ;
      margin: auto;
  
  }
  
  #topbar{
      height:30px;
      width:100%;
      background-color:#333;
      position:absolute;
      top:0px;
      left: 0px;
      right: 0px;
      color:#FFF;
      overflow: hidden;
  }
  </code></pre>
  
  <p>But the output is like following. (no wrapper)
  <a href="http://i.stack.imgur.com/DXuWD.jpg" rel="nofollow">http://i.stack.imgur.com/DXuWD.jpg</a></p>
  
  <p>Please help me to solve this.</p>