Here's a screenshot:
http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png
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.
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?
HTML
<div id="container">
<div id="container-top"></div>
<div id="personal">
<h1>Jonathan Doe</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
</div> <!-- end #personal -->
</div> <!-- end #container -->
CSS
#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;
}
