wrapping text around another floated column with text

**tehprince** · Sep 13, 2007 08:11

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.

**richtestani** · Sep 13, 2007 10:38

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.

**all4nerds** · Sep 13, 2007 11:14

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>

**tehprince** · Sep 13, 2007 12:11

Originally Posted by all4nerds

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!

User Tag List

Thread: wrapping text around another floated column with text

Thread Tools

Display

wrapping text around another floated column with text

Bookmarks

Bookmarks

Posting Permissions