Image beside text with h1 and p - html

Question

I'm in the process of creating a website, and am trying to align text beside an image. It sounds easy, but for some reason, I just can't seem to get it.
Here is an image of how I'm trying to get the images and text to appear:
So far I've tried the following HTML:
<div class="example">
<div class="eg1">
<img src="eg1.gif" />
<h2>Example 1</h2>
<p>This is an example</p>
</div>
<div class="eg2">
<img src="eg2.gif" />
<h2>Example 2</h2>
<p>This is another example</p>
</div>
</div>
and CSS:
.example {
display: inline-block;
}
.eg1, .eg2 > img {
float: left;
}
.eg1, .eg2 > h2 {
float: left;
}
.eg1, .eg2 > p {
float: left;
}
At the moment is appears all messed up. They appear underneath each other, and the text appears on the wrong side of the image.
What is the best way to achieve this?

Answer 1

may be like this?
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
<div class="block">
<figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
<h1 class="title">the title here</h1>
<p class="excerpt">the text goes here</p>
</div>
http://jsfiddle.net/g57bB/7/

Answer 2

I recently set up navigation on a site like that. The key is in setting the image as the background and offsetting it with the center left no-repeat Though it was in a ul and a li format, I used the CSS in this format:
CSS
li a {
font-size:20px;
color:#f6f9db;
padding-left:75px;
background:url(icon-up.png) center left no-repeat;
text-decoration:none;
line-height:30px;
text-shadow: -2px 2px 1px #551508;
}
li a:hover {
color:#551508;
display:inline-block;
padding-left:75px;
background:url(icon.png) center left no-repeat;
text-shadow: -1px 1px 0px #f6f9db;
}