float left

[esthera]

i'm floating an image to the left but how can i get it to float left without wrapping around teh image (meanign I have an image and then the text without wrapping)

now i'm doing

<img src=image1.jpg class=floatleft>



css:

.floatleft{

float:left;
}

[VIPStephan]

If you want the text to stay under the image assign a width to it that is more than the space between image and right edge of the container. If you want the text to stay at the right of the image apply a left margin to the paragraph (or whatever element is containing the text).

[esthera]

the way I want it is

image big paragraph of text


paragraph image

image paragraph

and so on..

if i used tables then I would do each one it's own table and that would solve it but i would rather avoid tables -- how can i do this?

i tried floating the image left and paragraph right but the images are not aligning to the pargraph they are next to and it looks awful.

[_Aerospace_Eng_]

Don't use tables for this. Float the image to the left and give the text a left margin equal to or greater than the width of the image.

[esthera]

that's puttin it on the next line

what i did was

css:

.fright img{
float:right;

}
.fleft img{
float:left;
}
.fright p{
margin-left:130px;

}
.fleft p{
margin-right:130px;
}


html:


<img src=images/1.jpg class=fleft>
<p class=fright>
A paragraph of text goes here </p>
<img src=images/2.jpg class=fright><p class=fleft> A paragraph of text goes here </p>

<img src=images/1.jpg class=fleft>
<p class=fright>
A paragraph of text goes here </p>
<img src=images/2.jpg class=fright><p class=fleft> A paragraph of text goes here </p>

<img src=images/1.jpg class=fleft>
<p class=fright>
A paragraph of text goes here </p>
<img src=images/2.jpg class=fright><p class=fleft> A paragraph of text goes here </p>

[VIPStephan]

Look, you just place your HTML elements as you think they should appear if there are no styles:

<img src="images/1.jpg" class="fleft">
<p class="right">A paragraph of text goes here</p>
<img src="images/2.jpg" class="fright">
<p class="left">A paragraph of text goes here</p>
...


And always use quotes around the values of an attribute!

And then you just float the images left and right, respectively, and you apply a margin to the paragraphs equal to or more than the width of the images:

.fleft {float: left}
.fright {float: right;}
p.left {margin-right: ??px;}
p.right {margin-left: ??px;}

And I think you should clear the floats for every next paragraph (that the image after the paragraph is starting on the next line):

img {clear: both;}