place an image over multiple divs

Hi,

I'm working on a 3 column site where the center column [ID=center] is devided into several divs. Between every pair of divs is a styled <HR>, 2px, no border. The divs don't have much styling, the CSS gives the height, positioning of contents and background.
The first div is a banner with a height of 70, the second is a menu which is about 40 high, the third is a box with some user information wich has a height of about 150 and the fourth is a box with some text and image content which is about 300 heigh.
So it looks a bit like this:
------------------------------
|                                      |
------------------------------
|                                      |
------------------------------
|                                      |
|                                      |
------------------------------
|                                      |
|                                      |
|                                      |
------------------------------
There are some more divs below this but the image only extends over these three.
I want to put an image over these four divs (and the HR's in between) that starts 20px from the left, 50px from the top and is about 300px heigh.

I made the following code where the div with ID=toppic is the overlaying picture:
  <DIV ID="banner"><IMG SRC="banner.jpg"></DIV>
  <HR CLASS="whiteline">
  <DIV ID="menu">#menu contents#</DIV>
  <HR CLASS="whiteline">
  <DIV ID="profile">#profile contents#</DIV>
  <HR CLASS="whiteline">
  <DIV ID="info">#info contents#</DIV>
  <DIV ID="toppic"><IMG SRC="someimage.png"></DIV>
  <HR CLASS="whiteline">
  <DIV ID="newbox">#yadayadayada#</DIV>

CSS:
#toppic
{
  position: relative;
  top: -463px;
  left: 20px;
}

Like this the image is exactly where I want it but any HR and div under it are pushed all the way down to the bottom of the page.

I'm not completly new to CSS but far from an expert, so I'm wondering if I'm doing this right or if I'm going all wrong about it. I'd either like a solution to the rest of the divs being pushed down or preferably a description on how I should achieve this effect "correctly".
Maybe it's better to remove the HR's and give the divs a bottom border?

Things I've already tried:
If I use position: absolute; the image is shifted to the left, as I said it is a 3 column design, the center column is a fixed width and the flanking columns are fluid so I don't know how to position it as I don't know how far from the left to start (depending on users resolution).

BONUS:
I'd also like to have two images overlay each other, the top being a gif or png with transparency, and these two then being the overlaying image described above.

Thanks in advance!

selohStart Free Trial