Text wrapping problem

HTML & CSS
1

I have been trying to work out to wrap the text around an image, haven’t had any luck in trying to get my css to work.

At the moment the whole thing looks like this:
text text text image image image
text text text
text text text

I need it to be like this:
text text text image image image
text text text text text text text
text text text text text text text

My doctype is XHTML 1.0 Strict. Could someone please help me solve the problem I am having? Thanks in advance.


<div class="product">
	<h3>Residential and Business Security</h3>
	<blockquote>
		<p>When it comes to safeguarding your home and business, let the Reliance NX - Series protect you. The system is simple to use and can be used with a combination of door and window sensors, glass break sensors, shock sensors and smoke sensors.</p>
		<p>The NX-Series has programmable emergency keys to contact "fire", "ambulance" and "police" personnel via a 24 hour control room.</p>
	</blockquote>
					
	<img alt="Residential and business security photo" height="120" src="images/residential-and-business-security-photo.jpg" width="86" />
</div>



.product {
	float: left;
	width: 33%;
	display: block;
	
}

.product blockquote {
	float: left;
	width: 145px;
	
}

.product img {
	float: right;
	width: 86px;
	
}
2

You just need to move the code for the image into the <bockquote> container:

<div class="product">
    <h3>Residential and Business Security</h3>
    <blockquote>
        [COLOR="Red"]<img alt="Residential and business security photo" height="120" src="images/residential-and-business-security-photo.jpg" width="86" />[/COLOR]
        <p>When it comes to safeguarding your home and business, let the Reliance NX - Series protect you. The system is simple to use and can be used with a combination of door and window sensors, glass break sensors, shock sensors and smoke sensors.</p>
        <p>The NX-Series has programmable emergency keys to contact "fire", "ambulance" and "police" personnel via a 24 hour control room.</p>
    </blockquote>
</div>
3

Thanks for your help, ralph.m. I have just tried that. Now the image has moved on top of the text, so it has moved the text down to underneath the image. Is there another suggestion you could make to correct my css? Another thing is that it now has a message, when I place my mouse over the img, saying that “The XHTML 1.0 Strict the tag <blockquote> cannot contain a tag <img>.” - what do I do about that.

This is how it is now:
image image image

text text text text
text text text text

4

this is what you want:


 .product blockquote img{ float:right;}
.product blockquote{overflow: hidden;}


    <blockquote>
        <p><img alt="file:///Camus/Users/raymessina/Desktop/image1_20101116.jpg" height="120" src="images/residential-and-business-security-photo.jpg" width="86" />When it comes to safeguarding your home and business, let the Reliance NX - Series protect you. The system is simple to use and can be used with a combination of door and window sensors, glass break sensors, shock sensors and smoke sensors.</p>
        <p>The NX-Series has programmable emergency keys to contact "fire", "ambulance" and "police" personnel via a 24 hour control room.</p>
    </blockquote>
5

Thank you, dresden_phoenix, I finally got it to work.