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 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.


> 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.
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">