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

**CapitalWebHost** · Aug 18, 2004, 19:44

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?

**albion7** · Aug 18, 2004, 20:17

#adquote {
clear: both;

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

hth-

**CapitalWebHost** · Aug 18, 2004, 20:24

doh...thank you...lol...*smacks self in head*.

Owe ya a beer...

**jfitz** · Aug 18, 2004, 21:00

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>