Решил немного систематизировать поиск различных решений (ошибок) в вёрстке в дивах (div). Без этого такая работа превращается в метод научного тыка, что отнимает уйму времени.

Что бы понять суть, а не пытаться всё запомнить, начну с того, что имеется из браузеров для просмотра сайта. По отношению к вёрстке в дивах браузеры делятся на IE и остальные. Здесь и далее пишу не ради дискуссии о том, кому какие браузеры нравятся, а с точке зрения работы браузера с дивными блоками.

Браузера НЕ IE, появились и предназначались для быстрой обработки таблиц, на которых верстались сайты. Браузер IE так и не смог освоить табличную верстку и загружал сайты много медленнее, обсчитывая каждую таблицу.
Ныне вёрстка в таблицах уходит в прошлое с появлением таблиц стилей (CSS), а браузеры сделанные под таблицы остались. Эти браузеры ведут себя в дивной вёрстке так же как с таблицами.

Браузер IE так же не изменил своим "привычкам" и продолжает в дивах обсчитывать вёрстку, что намного привлекательнее, поскольку дивный блок в отличии от таблицы не будет работать без стилей из таблицы стилей, а в IE будет работать.

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

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

<div>
содержимое блока
</div>

Это самый простой код дивного блока. Но он будет по разному отображаться в браузерах. В IE блок автоматически растянется на всю ширину страницы, а содержимое блока получит отступы по вертикали. В остальных браузерах блок "повиснет" на содержимом. В последнем случае, что бы блок растянулся по горизонтали следует указать размер ширины блока. Если на всю ширину страницы, то значение width (ширина) будет равно 100% - всё как в табличной вёрстке.
Код блока с размером по ширине во всю страницу будет следующим

<div style="width:100%;">
содержимое блока
</div>

Но для IE код избыточен, в результате в браузере может появится горизонтальная прокрутка, а часть страницы справа может вовсе исчезнуть. Что бы вернуть IE в работоспособное состояние применяют хаки. То есть, продолжим "принуждать" IE к работе с приёмами табличной вёрстки и, хотя, таблиц уж нет в вёрстке, но есть теперь браузеры работающие с этой вёрсткой.
В случае с шириной браузера во всю страницу код дивного блока для всех браузеров будет выглядеть так.

<div <if condition="!is_browser(ie)">style="width:100%;"</if>>
содержимое блока
</div>

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

<div style="overflow:hidden;">
содержимое блока
</div>

Этот код будет работать во всех браузерах.

Выше я разобрал наиболее распространённый вариант вёрстки, который подвергается редактированию. Но, к сожалению, в таком виде, с одним только стилем по ширине, вёрстка блока встречается реже. В основном в блоке применяются сразу несколько стилей. В тоже время, блок, в отличие от таблиц не имеет видимых границ, а сами блоки, в отличии от ячеек таблиц, располагаются на странице в произвольной последовательности. Указанные обстоятельства сильно затрудняют редактирование вёрстки в дивах. Даже опытный верстальщик может часы, а то и дни, проводить в поиске причины, по которой блок не хочет вести себя так, как написано в его HTML коде.

Решение этой проблемы простое – блок необходимо вооружить видимыми границами. Изначально это потребует изменение HTML кода блока, то есть траты на это действие времени, при кажущейся простоте редактирования блока. Ну это сами решите, какова будет последовательность действий.
Ниже напишу о том, как сделать границы блока видимыми.
Для этого в стиль блока (или к имеющемуся стилю блока) необходимо добавить свойства бордера. Border позволяет одновременно установить толщину, стиль и цвет границы вокруг блока.

<div style="border:1px solid black;">
содержимое блока
</div>

В приведённом примере границы блока обозначены линией толщиной в 1 пиксель, чёрного цвета. Толщину линии и цвет линии можно изменять.
Напишу HTML код из нескольких блоков

<div id=”1” style="border:1px solid #000000;">
<div id=”2” style="border:1px solid #FF0000;">
<div id=”3” style="border:1px solid #0000FF;">
содержимое блока
</div>
</div>
</div>

Получилось три блока, встроенных один в другой с номерами id от 1 до трёх. Если посмотреть на блоки через браузер, то увидите три рамки, чёрную снаружи красную посередине и синим цветом внутри. При этом в браузере IE рамки будут растянуты по ширине окна браузера. Следующим шагом выравниваем содержимое внутреннего блока по центру окна по горизонтали.

<div id=”1” style="border:1px solid #000000;">
<div id=”2” style="border:1px solid #FF0000;">
<div id=”3” style="border:1px solid #0000FF;text-align:center">
содержимое блока
</div>
</div>
</div>

В браузере IE выравнивание произошло, в остальных нет. Следуя моим инструкциям в начале темы вы поставите внутреннему блоку размер ширины в 100% и ни какого результата не получите, содержимое блока останется на месте. Если бы границы блоков не были раскрашены, то причина этого была бы неясна. Правильнее сказать, виноват был бы Лунтик, поскольку его код не работает.
НО тот кто не поленился и предварительно раскрасил границы блока видит, что внутренний блок обжимают снаружи два блока, поэтому содержимое внутреннего блока, хотя и центрируется, но остаётся на месте. Исправляем ситуацию тем, что внешним блокам присваиваем свойства ширины со значением 100%

<div id=”1” style="border:1px solid #000000;width:100%;">
<div id=”2” style="border:1px solid #FF0000;width:100%;">
<div id=”3” style="border:1px solid #0000FF;text-align:center;width:100%;">
содержимое блока
</div>
</div>
</div>

После того, как получите результат, свойства бордера нужно удалить из стилей блоков и границы блоков вновь станут невидимыми.

а зачем ИЕ растягивает блок по ширине по умолчанию?
ну вот не догоняю я, нафига?
из-за этого куча проблем с версткой
нормальное явление, когда ширина блока выравнивается по содержимому, в случае
если нужен блок с заданным размером, просто ставим размер, тоесть логика такая: нужно - ставим, ненужно - auto
для ешака нужно делать костыли, иначе блок разнесет в стороны, если не указывать ширину блока
в свое время попортил себе кучу нервов в одном из своих хаков - файловик
очень многое там реализовано на аяксе, всплывающие окна к примеру
яваскриптом создается оболочка - блок и затем в этот блок подгружается содержимое
следите за мыслью
создаваемый яваскриптом блок без указания ширины, т.к. я еще не знаю, какой контент придет туда
если это такой же блок с текстом внутри, ок, я могу указать у дочернего ширину 600, у родительского +3px на сторону и все ок
но если приходит более сложный код с объектами флеш проигрывателей, размеры которых я не могу знать, т.к. админ выставляет их в настройках И если размер дочернего больше, чем родителя, получаем кривое окно
границы внешнего блока меньше, чем внутреннего
вот примеры таких окошек
Каталог ссылок - скрины (267.2 Кб)
это окошко файла-архива
растянуто по ширине автоматически, в зависимости от кол-ва кнопок, т.е. по максимальной ширине содержимого
админ и узер видят разное окошко, кол-во кнопок разное
если указать фикс. размер блока, окно будет кривое

или вот пример файл с медиа плеером

Filename Edit AJAX (1.31 Мб)
кол-во кнопок другое (меньше), но в блоке другое содержимое, с фикс. размером
внешний блок выравнивается по своему содержимому

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

Originally Posted by kerk

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

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

Originally Posted by kerk

для ешака нужно делать костыли, иначе блок разнесет в стороны, если не указывать ширину блока

Писал об этом, повторю. Отступы и поля, создаваемые IE отменяются в CSS overflow:hidden А, вот, чтоб создать такие поля ручками для других браузеров требуется описать много свойств в стилях блока.

Luntick добавил 24.08.2012 в 00:19

Originally Posted by kerk

это окошко файла-архива
растянуто по ширине автоматически, в зависимости от кол-ва кнопок, т.е. по максимальной ширине содержимого
админ и узер видят разное окошко, кол-во кнопок разное
если указать фикс. размер блока, окно будет кривое

<div style="display:block;overflow:hidden;padding:6px;">
содержимое блока
</div>

Этот код подойдёт для всех браузеров.

Originally Posted by Luntick

поскольку это определяется в функционале самих браузеров

да, разумеется
но я имел ввиду другое
удобней (и логичней, на мой взгляд) для верстальщика в описанном мною случае, именно поведение нЕ ешакоподобных браузеров

Originally Posted by kerk

удобней (и логичней, на мой взгляд) для верстальщика в описанном мною случае, именно поведение нЕ ешакоподобных браузеров

Так спору нет в том, чтобы браузеры были подобные тем, у которых вёрстка проще и работоспособна. Но первое, простота, не позволяет реализовать все преимущества дивной вёрстки, а второе определяется не самим браузером, а исполнением скормленного ему HTML кода. Поскольку роботы пока не умеют капризничать, то и показывают на мониторе то, чем их "кормил" верстальщик HTML-кода.

Luntick добавил 24.08.2012 в 09:11

Originally Posted by kerk

а зачем ИЕ растягивает блок по ширине по умолчанию?
ну вот не догоняю я, нафига?

В этом заключается смысл вёрстки в дивах. Блоки див помещаются в контейнер див, контейнеры див объединяются в ещё большие контейнеры и т.д. Блок помещённый в контейнер должен по умолчанию занять всё пространство контейнера. Если в контейнере несколько блоков, то по умолчанию они размещаются один под другим по всей ширине контейнера. Верстальщик может разместить блоки в контейнере по своему усмотрению, например, расположить блоки по горизонтали, а один сделать вертикальным (меню слева). Если потребуется, что бы дивный блок занимал минимум места в контейнере, равному размеру содержимого, то с помощью инструкции CSS блоку придают соответствующие свойства.
Контейнеру можно задать размер по ширине и все блоки в нём изменят свою ширину пропорционально. Внешнему контейнеру можно не присваивать размер ширины и тогда содержимое контейнера расположится по всей площади окна браузера, изменение размера окна которого будет приводить к пропорциональному изменению размеров дивных блоков (резиновая вёрстка).

kerk, то о чём пишешь ты, это вёрстка в таблицах. Разработчики табличных браузеров создают видимость понимания дивов своими браузерами, не забывая пинать тех кто это умеет делать. Как результат появляются уё..ща типа чётвёрки. Серьезные проекты не переходят с таблиц, что бы не рождать дизайнерские уродства, обеспечивая работоспособность сайта во всех браузерах.
Разрабы IE не перевели его на работу с таблицами в пике популярности последних, теперь и смысла в этом нет. Как выход для почитателей других браузеров, это продолжить создавать серьёзные проекты в табличной вёрстке, мирясь со всеми её недостатками.

не вижу недостатка в таблицах
и нет смысла меня в этом переубеждать
и блоки и таблицы хороши каждый на своем месте

А что делать если блок CODE растягивает дизайн из-за тега <pre> в нем? Когда вставляют код имеющий большую ширину