Posted by Ben C on 11/15/06 14:15

On 2006-11-15, Susanne West <swest@gmx.de> wrote:
[snip]
>> In the second example, set position: absolute on div#shows_2. That takes
>> it out of the normal flow (so the table doesn't grow to fit it in), and
>> also puts it on top (positioned things are drawn on top of normal-flow
>> descendents anyway, no need to set z-index).
>>
> right, but the larger text still disrespects the span align=right and
> alings to the left of the cell. if i could get the text right-aligned,
> that would be the solution i'd go for.

You can't set "align=right" on a span, it's invalid HTML for one thing,
but also doesn't make sense. Right-alignment is something you set on a
block, which determines how the block lays out the inline things inside
it.

You can set "align=right" (or 'style="text-align: right"') on the td, or
you could change that span to a div, and set style=text-align: right on
that.

[snip]
>> It overflows the containing cell because you use <nobr> (which amounts
>> to whitespace: nowrap) and you've set a width. There just isn't room for
>> the text and you've told the browser not to break lines, so it
>> overflows.
>
> can't follow you here. i was referring to the cell that contains the
> larger amount of text 'alignment of both...'). that has no NOBR and
> is encapsulated in a div which should result in normal textflow
> within the div.

Ah, I thought you were talking about the bit that pops up. But I can't
follow _you_ here, I can't see anything overflowing the <td> in my
browser (Firefox).

>> If you set position: absolute, get rid of z-index which is no longer
>> necessary (absolute things go on top anyway), and remove width: 100,
>> then the div gets a shrink-to-fit width (that's what absolutely
>> positioned things with auto width do), which means it grows to the right
>> size for the text.
>
> not true. there's a <div><div></div><div></div></div> structure
> in the third example and i still get the first encapsulated div on
> top of the second (text on top of 'details').

That's because you've set a z-index (of 1) on the thing #shows_3 is
supposed to be appearing on top of. Actually #shows_3 appears behind it
but it has a transparent background (the default) which is why you can
see #shows_3 at all.

Unless I've misunderstood what you're talking about.

[Back to original message]