До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, в виду их некоторого несоответствия принципам веб-дизайна и навигации, были объявлены злом и преданы остракизму. Любое использование фреймов, за редким исключением (например, в чатах), вызывало возгласы о том, что веб-мастер недостаточно профессионален и не понимает всех тонкостей создания сайтов. Что оставалось делать в этой ситуации верстальщикам, когда и вариантов не остается? Только переходить на таблицы. Поэтому верстка с использованием таблиц на долгое время стало определенным стандартом. И как только эти таблицы не применяются — и рамки с помощью них делают, и модульные сетки задают, и цветной фон создают, и элементы выравнивают по разным краям. Конечно, это противоречит идеологии разделения оформления и содержания, но о такой «мелочи» никто и не вспоминал. Ситуация поменялась с выходом новых версий браузеров, которые стали придерживаться стандартов и содержать средства по работе со слоями. Вот тогда и заговорили о новой системе верстки сайтов, когда о таблицах можно забыть или использовать их только по прямому назначению.
Рассмотрим, как располагать рядом по горизонтали два и более слоя. По умолчанию, использование тега DIV для создания слоя, автоматически делает и перенос строки после него, поэтому несколько идущих подряд слоев выстраиваются по вертикали. Нас же интересует, а как сделать то же самое, но по горизонтали, чтобы можно было создать, например, две колонки, как на рис 1. Все просто, в стили слоев добавим параметр float: left. Этот элемент говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.
| слой 1 | слой 2 |
Рис. 1. Размещение двух слоев
Теоретически, параметр float достаточно задавать лишь для одного слоя из двух. Однако браузер Internet Explorer в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).
Пример 1. Размещение двух слоев фиксированной ширины#right { /* Правый слой с синим фоном */
width: 400px;
background-color: #7589BF;
float: left;
padding: 10px;
}
</style>
</head>
<body>
<div id=left>Великаны должны быть большими или их должно быть много,
если они маленькие.</div>
<div id=right>Слон + хорошая пища = два слона.</div>
</body>
</html>
Чтобы текст не налезал на край слоя, что несколько некрасиво и снижает читабельность, добавлены отступы от текста до края слоя с помощью параметра padding.
Следующий сюрприз от браузеров нас поджидает, если от ширины слоя, заданной в пикселах, перейти на ширину, указанной в процентах. Если Internet Explorer показывает все нормально, то и Netscape и Opera переносят слой ниже, чем положено. Выход есть — общая ширина всех слоев не должна превышать 96 процентов. Может это странно и даже смешно, но это работает.