Код:
<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">
456
</div>
</div>
</div>
??????
ps: осел 6.0 и то корректнее отображает.
haveFun
Верхняя картинка не загружается. Что на ней?
haveFunВерхняя картинка не загружается. Что на ней?
Они по-моему одинаковые
haveFun, а что не так?
изображения одинаковые, просто форум, видимо, блочит ссылку на хостинг первого.
ладно расскажу.
параметр второго блока с цифрами 123 "float: left;" как бы намекает на то, что блоки 123 и 456 должны быть на одном уровне, а не друг под другом.
на скрине мы видим невменяемую магию компиляции нашего любимого фаерфокса.
это наверное прежде всего разработчиков касается. бед очень даже неадекватный.
кстати замечу что float у огнелиса периодически работает. я лишь привел пример того, когда он по неизвестной причине отказывается пахать.
какие будут соображения по этому поводу?
упд: если кого-то смущает ширина, что при таких параметрах:
Код:
<div align="center">
<div style="text-align: center; background: grey; width: 600px;">
<div style="background: black; color: white; width: 580px;">
000
</div>
<div style="float: left; background: red; width: 250px;">
123
</div>
<div style="background: green; width: 250px">
456
</div>
</div>результат абсолютно такой же.
haveFun, не эксперт в области флоатинга, но я понимаю эту ситуацию так: при задании блочному элементу float:left; он начинает отображаться как display:inline-block; с выравниванием по соответсвующей стороне;
задайте для 456 float:left; или display:inline-block; и 123 и 456 будут на одной строке.
тут дело заключаестя в том, что вы вроде и ограничели блок 456 по ширине и он должен влезать в оставшееся свободное место на строчке выше, но элемент все равно остается блочным и занимает 100% свободного пространства и не может поместиться на стоке выше.
Тема перенесена из форума «Поддержка пользователей» в форум «Разработка».
<span> поставь вместо <div>. <div> переносится на новую строку (если не заданы абсолютные параметры). 1 класс 2-я четверть.
Прошу прощения за неверную информацию.
Ничего не понимаю, честно.
256px+256px>550px
хорошая математика 
Ой, извините. И правда. Сейчас гляну, как код себя ведет.
Вообще-то мы в таких случаях применяли margin-left: 257px;
Так. Есть предположения.
Код:
<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 этой темы) и меняю там одно число:
– уже интересно, да? То есть зеленый блок начинается с верхнего левого угла флоата, как и должен по спецификации.
Всё. Теперь знаю.
Флоат действует на текст следующего блока, а не на сам блок.
То есть, если мы не задаем ширину для зеленого блока, сам блок начинается там же, где и флоат, ширина у него считается оттуда же, а текст переносится к правой границе флоата, его обтекая. Так?
Теперь мы делаем блок (в обратном порядке) 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, то есть, как правило, невидимым, неощутимым и необнаружимым, куда исчезает и фон, что может создавать проблемы
Именно перечисленные три способа позволяют гарантировать, что практически все более или менее современные браузеры прорисуют блоки в две колонки, и подразумеваемой видимой ширины.
Если есть вопросы – пишите.