Добрый день.

На сайте новая статья Игоря Бурцева - Расстановка ключевых слов внутри сайта.

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

Сегодня продолжение темы о слоях и фиксированном дизайне, создаваемом с их помощь. Статья публикуется с незначительными сокращениемя. Полностью текст можно посмотреть по адресу www.htmlbook.ru/content/?id=173. В следующий раз поговорим об использовании параметров CSS position и как им пользоваться.

Фиксированный дизайн. Часть 2

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

Использование параметра float

Здесь все просто, в стили совмещаемых слоев добавим параметр float: left. Этот элемент говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.

Теоретически, параметр float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).

Высота слоев определяется их содержимым, поэтому подход, показанный в примере 1, создаст две прямоугольной области разной высоты и цвета. Изменить эту ситуацию и сделать две колонки одинаковой высоты, независимо от содержимого слоев, можно, введя еще один дополнительный слой. У этого слоя, назовем его column, цвет фона должен совпадать с цветом фона левой колонки, а ширина равняться общей ширине двух колонок (пример 2).

Различие между двумя подходами к созданию колонок (пример 1 и 2) кроется не только в разном представлении слоев, но и в нюансах, пренебрежение которыми приведет к тому, что браузер покажет результат совсем не так, как ожидалось.