Image Float without Text Wrap Problem

need to display different images in different boxes

[Auris]

The following CSS code;

.box {
width:auto;
height: 90px;
background: url(images/image.jpg) 5px 10px no-repeat;
padding:5px;
padding-left:200px;
border:1px dashed #fff;
margin-bottom: 15px;
}

with this html;

<div class="box">
<h2>Header</h2>
text
</div>

works perfectly for 1 box but I need to display multiple boxes but with different images in each box.

How can I do this with just the one block of CSS code?

I've tried this;

p.img { float:left;}
p.content { }

where I can specify a different image (img src) in the html but I'd prefer to use the 1st CSS option if I can specify different images.

I'd appreciate any ideas you can give me.

[le_gber]

try this:

.box {
width:auto;
height: 90px;
background-position:5px 10px;
background-repeat: no-repeat;
padding:5px 5px 5px 200px; /* you had two padding lines */
border:1px dashed #fff;
margin-bottom: 15px;
}

#im1{ background-image:url(images/image1.jpg) }
#im2{ background-image:url(images/image2.jpg) }
#im3{ background-image:url(images/image3.jpg) }

and

<div class="box" id="im1">
<h2>Header</h2>
text
</div>
<div class="box" id="im2">
<h2>Header</h2>
text
</div>
<div class="box" id="im3">
<h2>Header</h2>
text
</div>

[Auris]

Thanks le_gber - this works perfectly.

I've been trying everything & thanks for pointing out the 2 lines of padding.

rgds