CSS-плавающие объекты с неизвестной шириной не переносят пробелы в тип документа

Question

Два div, плавающие влево, неизвестной ширины. Один из них имеет больше содержимого, чем умещается на странице, поэтому он перемещается ниже первого (кроме IE):

http://corexii.com/floatproblem/float.html

Добавить отображение: inline-таблица; и большой оборачивает свой контент (последовательно во всех браузерах):

http://corexii.com/floatproblem/table.html

Но введите doctype (не просто строгий, ЛЮБОЙ doctype), и в Firefox его больше нет:

http://corexii.com/floatproblem/doctype.html

Как получить правильный div, чтобы обернуть его содержимое при одновременном использовании doctype, надежно в браузерах?

Answer 1

Как мне получить правильный div, чтобы обернуть его содержание при использовании doctype на в то же время, надежно ли в разных браузерах?

Без определения ширины, вы не можете . В этом случае я бы порекомендовал ширину в процентах, но решать вам.

Ширина по умолчанию для элемента div составляет 100% его контейнера (в данном случае страница). Первый div будет иметь фактический размер, если вы не увеличите размер страницы по сравнению с собственной шириной. Ожидание согласованности между браузерами без полного и действительного типа документа - просто бесполезное упражнение.

Answer 2

CSS не может сделать все, что могут макеты на основе таблиц. С одной стороны, динамические макеты ширины намного сложнее. Макеты без таблиц по-прежнему предпочтительнее в 98% случаев, но если вам действительно нужен такой тип динамической компоновки ширины, вам, возможно, придется использовать таблицу.

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

Answer 3

Вы можете начать с включения элемента BODY.

Traingamer объяснил вам поведение Firefox и что нужно сделать, чтобы получить желаемый результат. Вы можете слушать его, вместо того, чтобы рассказывать о невозможности создания макетов с помощью CSS.

Не вините CSS в проблемах, которые вы представляете, не придерживаясь правильных веб-спецификаций.