Positioning several text items over an image - html

Question

What is the easiest way (using css) to position several separate text items over the top of a single image?
I've got the following:-
<div>
<img src="image.jpg"/>
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
with the CSS:-
div {
position: relative;
}
div p {
position: absolute;
top: 0;
left: 0;
}
But that doesn't work because all of the text items are on top of one another.
Is the best way to do it with a list? Or is there another way?

Answer 1

Something like this:
div { position:relative; }
div img { position:absolute; top: 0; left: 0; }
div p { position:relative; z-index: 2; }
But this way the div will take the height of the text, not the image.

Answer 2

DEMO
div {
position: relative;
}
div img {
position:absolute
}
div p {
position: relative;
top: 0;
left: 0;
color:#fff;
}
UPDATE
OK, that seems to work - but how do I make sure the text items are all
contained within the confines of the image? Is that even possible?
Ideally, I'd like to make the text items appear in two parallel lists.
DEMO
You'd need to set the size of the container div to that of the img. From then, you can control how you want to handle the overflow.
You can use float:left; width:50%; on your p so they display in two columns.