[bochenn]

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 DEX New York -> use google fo find it.

Whats my problem?

Please go to this page "Beauty Atrium > Hair Services" 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 - 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;
}