[depolitic]

I am using just css to have the paragraph of text to right of my image wrap around my image. This works fine.

However when on the end of the same paragraph of text I place a second image that I want to have the text wrap around the image - however this time on the left hand side of the image. Only the last line of the paragraph text actually warps instead of the whole paragraph. Thus only the the top edge of the image ever touches the paragraph of text instead of being totally wrapped as the first image is.

Visually I am making a quote - with left and right quote marks on either side of the text.

i.e. " some text "

<img style="float:left; clear:left;" src="image.png">

Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text

<img style="float:right; clear:right;" src="image.png">

[Synotic]

Quite honestly, that description was rather hard to follow� I was having trouble visualizing it in my head. Therefore, I'm not really sure what effect you're trying to achieve, but you might look into using background images. Something like:

Code:
<blockquote><p>This is a quote</p></blockquote>

And then putting your top left quote image as the background for the blockquote and the bottom right for the paragraph. But again, I'm not exactly sure what you're going for, so if this doesn't help, a visual might be useful.

[madmacgames]

I'm not sure I understand either. text will wrap around images by their very nature in HTML. You just have to align them left or right. No need to float them if I understand you correctly.

Is this similar to what you are looking to do (image to left w/ text wrapped around it & image to right w/ text wrapping around it)?:
http://www.madmacgames.com/info/review_discount#2

or maybe you could show us a mock-up screenshot of what you are trying to do.

[CaptainHaddock]

Depolitic, I see what you're trying to do. The problem with your code is that because the second image is after the text in the page flow, setting float: right will not magically move it up beside the text. Both images need to come before the text in the page flow.

Trying to bottom-align an image and also make it float is an interesting experiment. Although I haven't tried it, the following might work:

<div style="position: relative">

<img src="openq.png" style="position: absolute; float: left; top: 0px; left: 0px;">

<img src="closeq.png" style="position: absolute; float: right; bottom: 0px; right: 0px;">

Several lines of text here.

</div>

The idea is to attach the second quote to the bottom-right of the container div. Whether you can float an element that is absolute-positioned, I have no idea. Note that there's no need to clear floats.

Otherwise, if your lines of text are precisely known, you can stick <br /> pagebreaks at the end of each line and put the second image with float: right after the appropriate line (maybe the second-last one?).

[depolitic]

CaptainHaddock - thanks for your help and for the others sorry - tried my best.

CaptainHaddock - now the images are in the right location but the text is now running under the images.

Any ideas?

The text will be dynamic and part of a much large cms design template for people to use.

[CaptainHaddock]

So that didn't quite work, huh? I guess float gets ignored if you set position: absolute.

Tell you what, creating a "quote box" like you're making sounds generally useful, so I'm going to fiddle around with it myself, try out some other ideas. If you're not in a terrible hurry, Depolitic, I'll post my results in a day or two.

[rozwado1]

How about creating a <div> that only has the quotation images, and then a seperate <div> inside of that with the text. If you use set widths for the divs, you should be able to do something like so:

" text text text text "
text text text text.

In the outer <div>, you'd just have to float the images left and right with the text <div> in between.

edit: if you want the right quote to set on the bottom-right, then you'd have to use a margin-top with a percentage to align the image to the bottom of the outer <div>.

[Diggory Laycock]

I'd rip-off the code from the quotes on this page:

http://news.bbc.co.uk/1/hi/talking_point/3701848.stm

[depolitic]

Any one can do it in html it needs to be with CSS - I hate CSS but the growing number off CSS fanatics makes it hard to be seen as professional if you have even a signal table in your code.

Aiming to be table free :-(

I miss tables.

[CaptainHaddock]

Diggory, that page is just putting image tags after the text, there's no cool text reflow happening that I can see.

Actually, depolitic, tables would be useless for doing this. CSS gives us a lot more control. I think I have it 90% figured out at this point, although I'm using a bit of a hack. If only there was a float:bottom attribute!

Ugh, besides, I hate designing with tables. There's nothing worse in web design than trying to decipher or modify a layout with 12 nested tables.

[depolitic]

double

[CaptainHaddock]

Okay, I'm still only 90% there, but here's a page that kind of does what you want:

http://www.hiddenfortress.net/testbed/test-1.html

The trick was to use a hidden floating div as a "sandbag" to push the quotes on the right down. The only problem is that if the amount of text varies too much, you're going to have to adjust the margin on the sandbag like I did in the second quote-box.

Theoretically, this problem should be solved by making the top-margin of the sandbag a percentage (100%) and then pulling up the quote underneath with a negative margin; but for some reason, 100% gives a fixed height regardless of the size of the container. I can't figure out why.

So anyway, what I've done above sorta works.