SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist CapitalWebHost's Avatar
    Join Date
    Apr 2003
    Location
    Albany, NY
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't seem to get float to wrap text...

    Here's the test page:

    http://www.capitalwebhost.net/wraptest.htm

    Here's the CSS:

    Code:
    <style type="text/css">
    <!--
    #main {
    	position: absolute;
    	left: 10px;
    	top: 10px;
    	width: 640px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	line-height: 16px;
    	color: #330099 ;
    }
    #content {
    	position: relative ;
    	left: 10px;
    	width: 500px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 18px;
    	color: #000000;		
    }
    
    #content img { float:right;}
    
    #adquote {
    	position: relative;
    	float: right;	
    	width: 300px;
    	font-size: 8px;
    	line-height: 10px;
    	color:#FF0000;
    	padding: 2px 0 2px 0; 
    	text-align:center
    }
    
    -->
    </style>
    What am I doing incorrect?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Northern CA, USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #adquote {
    clear: both;

    Add the above line ( clear: both; ) to your #adquote style rule.

    hth-

  3. #3
    SitePoint Evangelist CapitalWebHost's Avatar
    Join Date
    Apr 2003
    Location
    Albany, NY
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    doh...thank you...lol...*smacks self in head*.

    Owe ya a beer...

  4. #4
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Albion's right and I don't want to nitpick but
    Code:
     clear:right;
    will do. The problem has arisen from the fact that you have a 500px content div with a 300px wide picture and another 300px div wide directly beneath. When you float them both right the caption tries to sit to the left of the picture but it won't fit so it has to sit underneath. That causes all the subsequent text to sit below. Clearing right forces the caption to sit below and then IE can continue rendering the rest of the text properly.

    IMHO, a better solution would be to associate the caption with the picture in the html. That would be more semantically correct and would sort your problem too.

    So, if it was me, I'd be aiming more for this

    HTML Code:
    ...
    [s]#content img { float:right;}[/s]
    
    [color=red]#ad[/color][s]quote[/s][color=red] {[/color]
    	[s]position: relative;[/s] /*don't need this*/
    [color=red]	float: right;
    	width: 300px;
    	font-size: 8px;
    	line-height: 10px;
    	color:#FF0000;
    	padding: 2px 0 2px 0;
    	text-align:center
    }[/color]
    
    -->
    </style></head>
    
    <div id="content">....
    ....
    <div id="ad"><img src="/demo_ad.jpg" height="250" width="300">
    	<br>Vestibulum sit amet nisl. Proin vulputate varius lorem. In lacinia. Cum sociis. 
    </div>
    Note that the "ad" div encapsulates both the picture and the caption together.

    That's my two cents on it,
    John
    Last edited by jfitz; Aug 18, 2004 at 22:28.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Northern CA, USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice catch John,

    I saw it was a demo page to wrap the content around the pic, but I agree that your solution is a good one.

    Have a good weekend!

  6. #6
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by albion7
    Nice catch John,

    I saw it was a demo page to wrap the content around the pic, but I agree that your solution is a good one.

    Have a good weekend!
    Cheers albion, same to you


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
  •