Text over Html Inline Image

HTML & CSS
1

Hi.

I want to position text over an inline image by using two layers of divs, is this possible and if so how?

As the regular forum reader might know, I am developing a project using a fluid grid presentation. Since the background-size property is still not implemented, I am attempting to add my banner image as an inline image, with a div above it containing text.

As it stands it does not work as i’d thought it would, the second does not get positioned over the one with the image.

2 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <title> </title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />
        <style>
			.container .image {width: 100&#37;; position: absolute;}
			.container .image img{width:100%;}
			.container .text{color: white; position: relative; width:100%; height:100%;}
			.container {height: 150px; width: 500px; position: relative; overflow: hidden;}
		</style>
    </head>
    <body>
    Here's some text!
    <div class='container'>
    	<div class='image'><img src="image.jpg"></div>
        <div class='text'><p>Hello there!<br>This is text on an image.</p></div>
    </div>
    And some more.
    </body>
</html>

That should do it.