SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    .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

    Code:
    <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:

    links.jpg


    And my live site:

    http://villarentfethiye.simpg.net

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


    Any suggestions ?

    Thanks.



    .

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .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.

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

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks VERY much for your help

    It looks great now


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •