(no subject)

[morwen]

Dear Lazyweb,

I would like to display some text in a web-browser that ends up looking like this:

Someone says "

The quick brown fox jumps over the lazy dog. Victor jagt zwölf Boxkämpfer quer über den Sylter Deich. Cwm fjord bank glyphs vext quiz. Buvez de ce whisky que le patron juge fameux."

Someone else says "

The quick brown fox jumps over the lazy dog. Victor jagt zwölf Boxkämpfer quer über den Sylter Deich. Cwm fjord bank glyphs vext quiz. Buvez de ce whisky que le patron juge fameux."

i.e. the indent on the second line is as far as it had got up to with the quote mark on the first line. I can do this in tables (see the source). I'd like not to. Is there a way of doing this with <div> and CSS? From my researches I can see no way, but I'm not an expert.

Comments

[abigailb.livejournal.com]

First version I saw was like the metaphorical goggles.

Current version is closer, but I want the indent amount to be based on the width of the introducing text: ie the quotes shouldn't line up. I shall amend my example to demonstrate this.

[aquarionical.livejournal.com]

Try now?

[abigailb.livejournal.com]

That appears to be it!

[abigailb.livejournal.com]

*pokes at the CSS* Aha. Thanks!

[pjc50.livejournal.com]

If you're using display:table, you might as well just use a table, surely?

[abigailb.livejournal.com]

I'd like there to be a stylesheet that doesn't do that, too, and not have to make structural changes to the HTML.