title: Top Container Background Problem
body: <p>Here's a screenshot:</p>
  
  <p><a href="http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png" rel="nofollow noreferrer">header http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png</a></p>
  
  <p>The red bar on the left is the background I set for the #personal div and I would like it to align to the top of the container, vertically.</p>
  
  <p>The problem is that I have a background for the #container-top div on top of the #container div with absolute positioning. Is there any way to move the #personal div up so there would be no space left?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div id="container-top"&gt;&lt;/div&gt;
      &lt;div id="personal"&gt;
        &lt;h1&gt;Jonathan Doe&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.&lt;/p&gt;
      &lt;/div&gt; &lt;!-- end #personal --&gt;
  &lt;/div&gt; &lt;!-- end #container --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
    background: url(images/bg-mid.png) repeat-y top center;
    width: 835px;
    margin: 40px auto;
    position: relative;
  }
  
  #container-top {
    background: url(images/bg-top.png) no-repeat top center;
    position: absolute;
    height: 12px;
    width: 835px;
    top: -12px;
  } 
  
  #container-bottom {
    background: url(images/bg-bottom.png) no-repeat top center;
    position: absolute;
    height: 27px;
    width: 835px;
    bottom: -27px;
  }
  
  #personal {
    background: url(images/personal-info.png) no-repeat 0px left;
  }
  </code></pre>