On 2008-03-03, Jonathan N. Little <lws4art@central.net> wrote:
> removeps-groups@yahoo.com wrote:
>> On Mar 2, 1:14 pm, Ben C <spams...@spam.eggs> wrote:
>>
>>> The easiest fix in this case, since you know the width of the float, is
>>> just:
>>>
>>> ul { margin-left: 6em; padding-left: 40px }
>>>
>>> Appendix D of CSS 2.1 suggests margin-left: 40px for ul, although
>>> Firefox uses padding by default. But here we want 40px + 6em, which we
>>> can achieve by making one of them margin and the other padding.
>>
>> Thanks, this works in all 3 browsers -- Firefox, IE, Dreamweaver.
>>
>> It's interesting that "margin-left: 6em" means from the left of the
>> page. I would have thought it meant 6em from the right boundary of
>> the left panel. But I guess this way to allow you to put stuff on top
>> of each other!
>
> No, you are seeing how margins collapse when floats are involved.

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

I tried to explain it to the OP, but I will try again.

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.

Inline boxes inside it (e.g. text) are moved to the right to get out of
the way of the float.

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.

Here is an illustration:

http://www.tidraso.co.uk/misc/listItemsAndFloats.html