Добрый день.

Нашло на меня что-то лирическое настроение, поэтому стиль написания текста несколько отличается от академического. И это несмотря на то, что зацвела черемуха, что всегда связано с похолоданием. В общем, не тепло на улице и в доме, пальцы мерзнут печатать. Сегодня юбилейный, девяностый выпуск рассылки, наверное это что-нибудь да значит. А скоро (1 июня) полгода сайту исполнится. Сначала решил, что к этой дате надо выпустить сотую рассылку, но подсчитав, что осталась неделя и даже если писать по статье раз в день, все равно ничего не получится. Так что будем продолжать писать материалы в том же темпе, то есть без спешки и суеты.

Размещение нескольких слоев

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

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

Следующий сюрприз от браузеров нас поджидает, если от ширины слоя, заданной в пикселах, перейти на ширину, указанной в процентах. Если IE показывает все нормально, то и Netscape и Opera переносят слой ниже, чем положено. Выход есть - общая ширина всех слоев не должна превышать 96 процентов. Может это странно и даже смешно, но это работает.

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

В примере, стиль для тега BODY указывается, чтобы слои выводились без отступов между краем браузера и слоем. Это, что называется, на любителя, можно и убрать, если хочется.

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