Problem with floating right

Hi,

I am trying to create a little info box which contains a photo in
the upper right hand corner.

There is some text which I want to wrap-around the photo with a margin of 10px.

This is the code I have, but it’s not quite working.
The photo is under the text and sticking out of the rounded box.

My code:

CSS


.adv {
	text-align:left;
	position:relative;
	}
	
	
.rightjst_adv {
	position:absolute;
	float:right;
	text-align:right;
	margin: 20px 0px 20px 20px;
 }

	
.adv img{ 
	width:150px;
	height:150px;
	border:1px solid darkblue; 
	padding:2px;
	margin:5px;
	}	

HTML


<div class="adv">
This is some text about a really great produce - its the best in the world and we are very very proud of it. This is some text about a really great produce - its the best in the world and we are very
<span class="rightjst_adv"><img title="keyword1" alt="keyword2" src="http://www.simpg.net/images/vil_salon_01_sm.jpg">/span></div>

The Result:

And my live site:

http://villarentfethiye.simpg.net

The problem area is under:
“Helpful Offers
(Just for You)”

Any suggestions ?

Thanks.

.

You need to put the image before the text that is wrapping round it, not after.

(But why put the image in a <span>? You can apply the float, margins, border and padding to the image directly, no need for another element there to get in the way and confuse things.)

As Stevie said put the floated image first in the html (before the text that needs to wrap around it) but you also have a stray position:absolute on the rule that should not be there:


.rightjst_adv {
	/*position:absolute; remove this */
	float:right;
	text-align:right;
	margin: 20px 0px 20px 20px;
 }

Position:absolute and float are mutually exclusive and position:absolute wins out.

Then you also need to contain the floats within the parent so add the following rule also.


.adv {
text-align:left;
position:relative;
overflow:hidden;/* contain floats*/
zoom:1.0;/* contain floats in ie7 and under*/
	
}

Thanks VERY much for your help

It looks great now :slight_smile: