В интернете можно найти массу примеров…
В интернете можно найти массу примеров верстки страницы в две колонки. Но у большинства из них есть недостаток: нельзя установить разделитель между колонками нужной длины. Проблема заключается в следующем. Нам нужно сверстать страницу с двумя колонками, например, меню (menu) и раздел с текстом (textBlock), между которыми нужно поставить разделитель (обычную линию или повторяющийся по вертикали рисунок). При этом размер колонок заранее неизвестен, т. е. меню может быть короче текстового блока, а может и наоборот. Вот тут и возникает проблема. Если использовать свойство border (или background-image) в более коротком блоке, то разделитель получится оборванным. Я хочу показать прием, который позволит обойти эту проблему. Идея заключается в том, что нужно поместить наше меню и текстовый блок во внешний блок (container). При этом container всегда должен быть больше чем оба наших блока.
На первый взгляд тут не должно возникнуть никаких затруднений, но вспомним, что для размещения блоков рядом друг с другом для одного из них мы должны задать свойство float, а оно «вырывает» блок из потока документа. Например, правило float:left задано для меню. Тогда, если меню длиннее, чем текстовый блок мы получим такую картинку: При такой разметке задавать в контейнере границы и фоновые изображения нет никакого смысла. Увеличить размер контейнера можно двумя способами. Первый способ. Добавляем в контейнер еще один блок (bottom) и устанавливаем для него в таблице стилей свойство clear:both. Этот блок будет всегда размещен под любым предыдущим блоком, не зависимо от того, задано свойство float или нет. После этого контейнер растянется так чтобы охватывать блок bottom. Теперь можно создать картинку и использовать ее в качестве фона в контейнере. Размещение блоков показано на рисунке 2: Ниже приведен текст файлов с разметкой и стилями. Вы также можете скачать пример (вместе с картинкой, которая используется в качестве разделителя). test2col. html