On 2008-03-08, removeps-groups@yahoo.com <removeps-groups@yahoo.com> wrote:
> On Mar 3, 12:16 am, Ben C <spams...@spam.eggs> wrote:
>
>> This is nothing to do with margin-collapsing (and margin: 6em does not
>> mean 6em from the left of the page either, it means 6em from the left of
>> the container).
>
> Is the container and page the same thing? My initial thought was that
> a div is a container, and thus I expected that text-indent: X on the
> the right panel means X units to the right of the left edge of the
> div.

A div is a container. Margin-left offsets from the left content edge of
the container (the "content edge" just means inside the margin, border
and padding of the container).

Text-indent offsets text from the left of the line box (if direction is
ltr). The line box's left edge is usually in the same place as the
container's left content edge, but not if there's a float there-- the
line box's left edge moves to the right of the float, but the
container's left edge stays where it is.

This means that if you have a float pushing text to the right, and then
text-indent as well, that pushes the text even further to the right.

But a block's left edge doesn't (usually) get pushed to the right by
floats, and margin-left on a block always offsets it from the left of
its container.

>> A normal block box (in direction: ltr) starts right over at the left of
>> its container. It starts right over at the left even if there happens to
>> be a left float over there.
>
> Got it.
>
>> Inline boxes inside it (e.g. text) are moved to the right to get out of
>> the way of the float.
>
> I modified your HTML to add the following:
>
> <div style="display: inline">
> This div is display: inline. It looks strange in
> Firefox.
> Need to add more lines, so that the text wraps around
> to see
> what it looks like.
> Need to add more lines, so that the text wraps around
> to see
> what it looks like.
> </div>
>
> The result is that the box is to the right of the left panel, which
> makes it very much like <div style="overflow: hidden">. However, each
> line has its own box/border around it (so that in-between the two
> lines is very thick border), but only the first line has a left border
> and only the last line has a right border. All lines have top and
> bottom borders.

Yup, that's inline boxes. An inline-block would you out here, but
you'll have to wait for Firefox 3.

>> A list-item is more or less a block box. Its left edge therefore does
>> not move to the right of the float, but stays where it is, over at the
>> left.
>
> Got it.
>
> The <div style="overflow: hidden"> was my favorite. Initially I liked
> the <div style="margin-left: 300px"> approach as it was clear and
> worked on all browsers. However, I ran into a problem with it. My
> left panel is only 60ems in height. So in the right panel, if I keep
> writing more and more stuff, I want the text to wrap around to below
> the left panel. Something like this where L is the left panel and R
> is the right panel.
>
> LLLL RRRRR
> LLLL RRRRR
> LLLL RRRRR
> RRRRRRRRRR
> RRRRRRRRRR
>
> But with the margin as 300px we don't get the wraparound effect.

Nor do you with the overflow: hidden technique-- it's just the same. The
only difference is that with margin-left: 300px you need to know it's
300px.

To push the bullets to the right _and_ have everything flow underneath
the float properly, you really need to go to list-style-position: inside.

Although it sounds like you've managed to work something out.

> Also, in my example I had the margin-left only on the ul, so the
> normal text did wrap around, but if in the region below the left float
> I had an unordered list, then it would be super-indented as it would
> be 14ems from the left of the page, which is fine if there is a left
> panel present (as then the ul is only 3ems to the right of the left
> panel), but strange looking below.
>
> So I am using <div style="overflow: hidden"> now with text-indent on
> the ul.
>
> .thrColElsHdr #container ul {
> line-height: 16px;
> text-indent: 2em;
> }
>
> ...
>
><div id="container" style="overflow: hidden">