SitePoint Sponsor

User Tag List

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

    Question wrapping text around another floated column with text

    I have two floated columns that each contain text. My right column is much shorter than my left, is it possible to have the left column wrap around the right?

    Attached is an image to show you what I'm looking to achieve. Any help would be appreciated.
    Attached Images Attached Images

  2. #2
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would put the right column in your HTML first, then float it to the right.

    Set the width of the right col, and either set the left to the entire width of your layout or don't set one at all.
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Wrap demo
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>IE 3 pixel jog wrapper correction </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	*{padding:0;margin:0;}
    	
    	body{background:#a2a2a2;}
    	
    	.tl{text-align:right;}
    	
    	.wra{background:#ffffcc;}
    	
    	.l,.ll{
    	width:12em;
    	background:#c0c0c0;
    	}
    	.l{float:left;}
    	.ll{float:right;}
    	
    	.r{background:#ff8c00;}
    	
    	* html .l{left:3px;position:relative;margin:0 0 0 -3px;}
    	* html .ll{left:-3px;position:relative;margin:0 -3px 0 0;}
    
    	</style>
    </head
    <body>
    
    <p>2 Column</p>
    
    <div class="wra">
    
    <div class="l">
    <p>
    left<br />
    <br /><br /><br /><br /><br /><br /><br />
    left<br />
    </p>
    </div>
    
    <!--  -->
    <div class= "r">
    <p>
    With IE Correction: <a href="../basic.htm" accesskey="z">back</a><br />
    <code>* html .l{left:3px;position:relative;margin:0 0 0 -3px;}</code><br />
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    </p>
    </div>
    </div>
    
    <p>3 Column</p>
    
    <div class="wra">
    
    <div class="l">
    <p>
    left<br />
    <br /><br /><br /><br /><br /><br /><br />
    left<br />
    </p>
    </div>
    
    <div class="ll tl">
    <p>
    right<br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    right<br />
    </p>
    </div>
    
    <!--  -->
    <div class= "r">
    <p>
    With IE Correction:<br />
    <code>* html .l{left:3px;position:relative;margin:0 0 0 -3px;}<br />
    * html .ll{left:-3px;position:relative;margin:0 -3px 0 0;}</code><br />
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    </p>
    <p class="tl">
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    </p>
    </div>
    </div>
    <p>&nbsp;</p>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds View Post
    Hello

    Wrap demo
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>IE 3 pixel jog wrapper correction </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	
    	*{padding:0;margin:0;}
    	
    	body{background:#a2a2a2;}
    	
    	.tl{text-align:right;}
    	
    	.wra{background:#ffffcc;}
    	
    	.l,.ll{
    	width:12em;
    	background:#c0c0c0;
    	}
    	.l{float:left;}
    	.ll{float:right;}
    	
    	.r{background:#ff8c00;}
    	
    	* html .l{left:3px;position:relative;margin:0 0 0 -3px;}
    	* html .ll{left:-3px;position:relative;margin:0 -3px 0 0;}
    
    	</style>
    </head
    <body>
    
    <p>2 Column</p>
    
    <div class="wra">
    
    <div class="l">
    <p>
    left<br />
    <br /><br /><br /><br /><br /><br /><br />
    left<br />
    </p>
    </div>
    
    <!--  -->
    <div class= "r">
    <p>
    With IE Correction: <a href="../basic.htm" accesskey="z">back</a><br />
    <code>* html .l{left:3px;position:relative;margin:0 0 0 -3px;}</code><br />
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    </p>
    </div>
    </div>
    
    <p>3 Column</p>
    
    <div class="wra">
    
    <div class="l">
    <p>
    left<br />
    <br /><br /><br /><br /><br /><br /><br />
    left<br />
    </p>
    </div>
    
    <div class="ll tl">
    <p>
    right<br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
    right<br />
    </p>
    </div>
    
    <!--  -->
    <div class= "r">
    <p>
    With IE Correction:<br />
    <code>* html .l{left:3px;position:relative;margin:0 0 0 -3px;}<br />
    * html .ll{left:-3px;position:relative;margin:0 -3px 0 0;}</code><br />
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    </p>
    <p class="tl">
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    test text test text test text test text test text test text test text test text 
    </p>
    </div>
    </div>
    <p>&nbsp;</p>
    </body>
    </html>
    Awesome, thanks for the example!


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
  •