float и отрицательные отступы

[scorpio]

Добрый вечер!

Нашел решение для двухколоночного макета, в котором используются плавающие элементы с отрицательными отступами. Пример работает, но я не могу понять, почему.

css:

#content{
    float: right;
    margin-left: -200px;
    width: 100%;
}

#content-inner{
    margin-left: 200px;
}

#left-sidebar{
   width:200px;
}

html:

<div id="content">
    <div id="content-inner">
        <p>content</p>
    </div>
</div>
<div id="left-sidebar">
    <p>sidebar</p>
</div>

C чисто обывательской точки зрения, отрицательный маргин должен сдвинуть блок контента с текущей позиции на 200 пикселей влево, однако вместо этого блок остается на месте и его обтекает идущий за ним сайдбар, о котором, контент, по идее, ничего не знает. Как это работает? Понятно, что общая ширина увеличивается на 200 пикселей из-за вычитания отрицательного значения, но откуда берется обтекание? Согласно спецификации, зафлоаченный вправо блок сдвигается вправо, пока не пристыкуется к границе следующего блочного элемента или другого зафлоаченного блока. Почему в этом случае он ведет себя по-другому?

Буду благодарен за разъяснения.

Edited April 25, 2011 by scorpio

[psywalker]

Да просто колонка обтекает контент, который до этого был отодвинут на её ширину. Она как раз туда и встала.

[scorpio]

Да просто колонка обтекает контент, который до этого был отодвинут на её ширину. Она как раз туда и встала.

Отодвинуто вправо содержимое контента, рамка же как бы отодвинута влево, но она не отодвинулась, а только изменила свою ширину. В общем, работает, но почему, непонятно, что раздражает. Со школы не люблю вещей, которые надо просто тупо зазубрить. Хочется понять смысл, закономерность

[scorpio]

Понял, как все работает.

1. Зафлоаченный блок прижимается к правому родителя
   
2. Отрицательный отступ не может сдвинуть его влево, так как элемент плавающий, но общая ширина блока уменьшается на ширину сайдбара
   
3. Отступы блока и сайдбара и их ширины суммируются, и так как отступы сайдбара нулевые, то общая ширина равна ширине родителя
   
4. По этой причине сайдбар может уместиться на одной строке с конентом, но так как контент плывет вправо, то сайдбар прибивается к левому краю
   

Все то же самое, что Вы и говорили, но адаптировано к моему способу мышления