Shoutbox

I've come across a problem when trying to code my website for college.

I've used CSS to position two horizontal lines, for example:

code:

---

div#hr1
{
position: absolute;
top: 35px;
}

---

and in the HTML it is simply..

code:

---

<div id="hr1">
<hr>
</div>

---

But the problem is they appear in front of the image, like this:



...and I want them to be behind the image. Or bring the image in front.

I've tried changing absolute to static, relative or fixed as explained here, but doesn't fix it.

Any ideas?