getting one paragraph to wrap and the next not.

akohl posted this at 10:38 — 13th February 2002.

Joined: Feb 2001

In the below example, I want some text to wrap to the left of a picture and
some other text to go below the picture.

I thought that putting the "clear :none;" on the paragraph that is to
go below the picture does this.

I know I should be able to solve the problem by
putting a table inside the cell.
But I'd much rather keep the html simpler and do it with css.

I'm testing the site in ie5 and opera 6.

.righty 
{  
	float: right; 
	border: thin #000000 none; 
	margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; 
	padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px
}

.marginText 
{  
	font-family: "Bookman Old Style", "Book Antiqua"; 
	color: #0000CC; font-size: 12px;
	/*clear: all;  adding this here didn't help either*/
}
.marginTextBelow 
{  
	font-family: "Bookman Old Style", "Book Antiqua"; 
	color: #0000CC; font-size: 10px;
	/* this clear doesn't seem to have any effect*/
	clear: none;
}


<td valign='top'>
	<h2>
		Title
	</h2>
	<p class='marginText'>
		some text that should and does wrap to the 
		left of the picture.
	</p>
	<div class='righty'>
		<img src='images/picture.gif'>
	</div>
	<p class='marginTextBelow'>
		some text that should be below the 
		picture but instead wraps 
		to the left
	</p>

</td>

Andy Kohlenberg
Jerusalem, Israel

Busy posted this at 21:31 — 13th February 2002.

He has: 6,151 posts

Joined: May 2001

does it have to be done with css?

how bout html? img src="image" align="right" and add or two after line of text you dont want beside the image, rest goes under.

COBOLdinosaur posted this at 18:40 — 17th February 2002.

They have: 2 posts

Joined: Dec 2001

instead of clear:none, it needs to be clear:right

The value of the float and clear need to be the same for the positioning you are trying to achieve.

Build a better mousetrap, and a new improved mouse will come along and steal the cheese.

Cd&