haveFun
Верхняя картинка не загружается. Что на ней?

haveFun, а что не так?

haveFun, не эксперт в области флоатинга, но я понимаю эту ситуацию так: при задании блочному элементу float:left; он начинает отображаться как display:inline-block; с выравниванием по соответсвующей стороне;
задайте для 456 float:left; или display:inline-block; и 123 и 456 будут на одной строке.
тут дело заключаестя в том, что вы вроде и ограничели блок 456 по ширине и он должен влезать в оставшееся свободное место на строчке выше, но элемент все равно остается блочным и занимает 100% свободного пространства и не может поместиться на стоке выше.

<span> поставь вместо <div>. <div> переносится на новую строку (если не заданы абсолютные параметры). 1 класс 2-я четверть.

Отредактировано eug888 (05-08-2011 21:59:06)

хорошая математика

Так. Есть предположения.

<div align="center">
    <div style="text-align: center; background: grey; width: 550px;">
        <div style="background: black; color: white; width: 550px;">
            000
        </div>
        <div style="float: left; background: red; width: 256px;">
            123
        </div>
        <div style="background: green; width: 256px; margin-left: 257px;">
            456
        </div>
    </div>
</div>

Вот так работает.

<div align="center">
    <div style="text-align: center; background: grey; width: 550px;">
        <div style="background: black; color: white; width: 550px;">
            000
        </div>
        <div style="float: left; background: red; width: 256px;">
            123
        </div>
        <div style="background: green;">
            456
        </div>
    </div>
</div>

И так.

У меня есть рабочее предположение, полностью оправдывающее Файрфокс.
Делаю эксперимент. В Фоксе загружаю первый из кусков кода в этом посте (margin-left и width). В Firebug отключаю margin, приводя код к исходному. Получаю:
http://d.pr/OyP9
Теперь беру исходный код (из поста №1 этой темы) и меняю там одно число:

width: 260px;

– уже интересно, да? То есть зеленый блок начинается с верхнего левого угла флоата, как и должен по спецификации.

width: 320px;

Всё. Теперь знаю.

Флоат действует на текст следующего блока, а не на сам блок.
То есть, если мы не задаем ширину для зеленого блока, сам блок начинается там же, где и флоат, ширина у него считается оттуда же, а текст переносится к правой границе флоата, его обтекая. Так?
Теперь мы делаем блок (в обратном порядке) 320px. Блок зеленый, не будучи флоатом, естественно, не выстраивается справа от предыдущего, а начинается там же где и предыдущий, и ширину имеет указанную, только текст ютится в оставленном пространстве.
Уменьшаем блок до той же ширины, что флоат, или до меньшей. Теперь, начинаясь там же, он должен перейти на следующую строчку.
Иллюстрирую:
testcase
http://cl.ly/0f1e0R1b2R3q2H3r0P1B

<div align="center">
    <div style="text-align: center; background: grey; width: 550px;">
        <div style="background: black; color: white; width: 550px;">
            000
        </div>
        <div style="float: left; background: transparent; border: 2px dashed red; border-radius: 5px; -moz-border-radius: 5px; width: 256px;">
            123
        </div>
        <div style="background: green; width: 220px;">
            456
        </div>
    </div>
</div>

P.S. Классические способы организации колонок при вёрстке флоатами:
⁽⁺⁾ внешнее поле – у второго (основного, без указания ширины) блока задаётся margin-left, больший (равный) ширины первого блока – флоата (и тут вступает 3пиксельный баг ИЕ, который устраняется разными способами), при этом флоат не занимает места в потоке документа по вертикали в смысле смешения элементов, и охватывающий блок имеет высоту второго, неплавающего блока (точнее, заканчивается у его нижней границы), что может создавать проблемы в некоторых версиях ИЕ в некоторых режимах, в Фоксе, Сафари, Опере, Хроме, etc
⁽⁺⁾ обтекание – у второго (основного, без указания ширины) блока текст заплывает под первый блок, что ценно для врезок
⁽⁺⁾ два флоата – левый и правый (правый и левый), ширина в процентах, часто во избежание разночтений по 49% или 48%, и обе колонки не занимают места в потоке документа по вертикали, что во многих (современных) браузерах делает охватывающий блок имеющим высоту 0, то есть, как правило, невидимым, неощутимым и необнаружимым, куда исчезает и фон, что может создавать проблемы

Именно перечисленные три способа позволяют гарантировать, что практически все более или менее современные браузеры прорисуют блоки в две колонки, и подразумеваемой видимой ширины.

Если есть вопросы – пишите.

Отредактировано Al_H (10-08-2011 20:11:52)