Got a CSS layout problem.

[AlexW]

Got a CSS layout problem.

I have three elements being pulled from a database. A pic, the body text, and a quote. That is the order they will be presented in the code, as in

- pic
- text
- quote

Now, I want the text to wrap around the quote like
this, but I don't want to have to break the text into 2 parts to do it (i.e. Part before the quote, part after the quote).

I can use CSS position the quote left and up but the text runs under rather than wrapping. Any idea?

[Michel V]

I'm afraid you can't do that with CSS only.
The method here would be to put the quote in a table, then apply align='left' to the table.

[AlexW]

But that will start the quote to the left but below the last line on of the text won't it? It will finish rendering the text, then start the table (i think?)

[sowen]

You can do it with css sort of, somthing like this;

in you css file

.quote {  
		font-style: italic; 
		font-weight: bold; 
		text-align: left; 
		float: left; 
		clear: none; 
		width: 20%
	}

in your html

<p> Some text for your para <span class="quote">Some text for your quote</span> the rest of your para text</p>

It works ok, but you obviously have to drop the quote into the required paragraph.

[AlexW]

Yeah, I'm trying to not split the text either side of the quote (in the source).

At the moment the call to the DB that renders each element (pic, text, quote) is a single line command for each. I'm trying to get away without writing extra code to segment the text block 3/4 of the way into it, and 'splicing' the quote into it.

Rather, kind of render each element as discrete units, then use CSS to force the quote up into it from below.

Relative positioning puts the quote where I want it, but the textblock runs under it, which isn't quite what I was looking for (Also leaves a gap where the quote should have been)

I'm getting the idea it's *probably* not possible.

Oh well, worth a try!

[Damage]

So you want the quote element of that page to be in the lower left corner and text wrapped around it right? Why not drop it into a table and have that table aligned to the bottom left? Text should wrap around it.


Or am I just totally wrong here?