Text over Html Inline Image


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.

    <title> </title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css" />
			.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;}
    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>
    And some more.

That should do it.