| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 4 of 4
-
Sep 13, 2007, 08:11 #1SitePoint Member
- Join Date
- Aug 2006
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 13, 2007, 10:38 #2SitePoint Addict
- 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
-
Sep 13, 2007, 11:14 #3Non-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> </p> </body> </html>
-
Sep 13, 2007, 12:11 #4SitePoint Member
- Join Date
- Aug 2006
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Awesome, thanks for the example!
Originally Posted by all4nerds
Bookmarks