Hi guys, i'm having a little problem on a website i've just finished.

I've used the beez template (Joomla) to start from, and after a few hacks here it is http://www.dexnewyork.com/ />
Whats my problem?

Please go to this page http://www.dexnewyork.com/hair-services.html it is all the website a pattern from this page.
I've done some nasty positioning and floatings to make it look good. What i want is to position the elements in a fine way.
In each content i use different images at diferent sizes so i need to float each image on the right of each piece of content, so i want a CSS without specific widths for the image and the paragraph as well.

"I have been following a tip from the book CSS MASTERY by Andy Budd http://www.cssmastery.com/" Page 40 - 42."

Any tip? Any sugestion?

Thanks in advance.

HTML CODE

<div class="destacado limpia">
<img src="images/stories/hair-services/Hair-Services-1-1.jpg" border="0" alt="Hair" title="Hair" />
<div class="parrafo">
<blockquote>In addition to Modern Mineral Makeup, Everyone wants more Natural Looking Hair.</blockquote>
<p>Call now to schedule an appointment: <strong>212.643.3188</strong></p>
<p><strong>Blow Dry</strong> | $40 & up<br /> with <strong>Flat Iron</strong> | $20 Additional<br /><br /><strong>Up-dos</strong> | $75 & up<br /><br /><strong>Women’s Haircut</strong> | $80 & up<br /> <strong>Men’s Haircut</strong> | $55 & up</p>
<blockquote>Expert Haircut, Color, and Styling Services. Get the Hair you’ve always dreamed of…..</blockquote>
</div>
</div>




.destacado {
width: 730px;
padding: 20px;
color: #333;
background: #eeeeee;
display: block;
}

div.destacado img {
margin: -20px -20px -20px 0;
float: right;
width: 300px;
display: table;
}

div.destacado .parrafo {
float: left;
width: 410px;
/*border: solid thin red;*/
}

div.destacado p {
margin-right: 20px;
/*display:table;*/
line-height: 1.6em;
}

.limpia:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear:both;
}