В последнее время всё большую популярность приобретает блочная верстка сайтов или, как ее еще называют, верстка div´ами. Суть этой технологии заключается в том, что каркас (шаблон) страницы формируется из блочных элементов — «DIV». Для каждого из этих блоков устанавливается стиль, который позиционирует его странице в определенном положении. Таким образом, формируется каркас, который, впоследствии, наполняют содержимым.
В этой статье я попытаюсь доходчиво объяснить, как сверстать макет страницы, состоящей из области для заголовка, трех, равных по высоте колонок, и нижней области — footer´а. А также по какому принципу он строится, и как добиться одинакового вида страницы разных браузерах.
Итак, что же мы хотим получить:
Для создания колонок равной величины, мы будем использовать технику «Ложных колонок», т.е. имитировать колонки с помощью фоновых изображений.
Сначала создаем внешний блок, в котором мы будем позиционировать другие блоки. Устанавливаем ему фоновое изображение, по ширине равное ширине первой колонки и задаем повторение по оси Y, а также привязку к левой стороне. Внутри первого блока создаем второй, аналогично устанавливаем фон для правой колонки. Далее идет блок заголовка. После этого создадим контейнер для содержания левой и центральной колонок. Нужно сделать его плавающим и, т.к. средства CSS не позволяют динамически вычислять размер блоков, сместить влево, из области видимости, на величину, равную ширине правого блока, и установить его ширину равной 100%. Внутри контейнера создадим два блока. Для того чтобы блоки располагались рядом, сделаем первый из них плавающим, а также сместим его в область видимости. Т.к. первый блок в контейнере мы сделали плавающим, при размещении второго блока браузер его не будет учитывать. Поэтому, чтобы мы увидели второй блок в нужном нам месте, нужно сместить этот блок вправо, вывести его в область видимости, а также, сместить его на величину, равную ширине левого блока. После блока-контейнера поместим блок сайдбара. Благодаря тому, что блок-контейнер плавающий, и смещен величину, равную ширине сайдбара, сайдбар поднимется вверх и займет позицию рядом с контейнером. Теперь создадим на footer и над ним поместим блок-очиститель, чтобы footer никуда не смещался.
В большинстве браузеров этот макет отображается правильно, но в Internet Explorer, мы получим совсем не то, что хотели.
Для этого и множества других багов в IE, есть достаточно простое решение: т.к. все плавающие элементы автоматически становятся блочными элементами, в стандарте сказано, что любые значения свойства display кроме none для них игнорируются, тем не менее, если установить для плавающих блоков display:inline, большинство багов IE пропадают, а блоки не становятся inline.
Контент...