Разбиваем страницу на две равные колонки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Пример для css-live.ru</title>
	
	<style type="text/css">	   
	   * { margin: 0; padding: 0; }
	   p { padding: 10px; }
	   #left { position: absolute; left: 0; top: 0; width: 50%; }
	   #right { position: absolute; right: 0; top: 0; width: 50%; }	
	</style>
</head>

<body>
    <div id="left">
        <p>Левая половина</p>
        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
        <p>Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги "de Finibus Bonorum et Malorum" ("О пределах добра и зла"), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, "Lorem ipsum dolor sit amet..", происходит от одной из строк в разделе 1.10.32</p>
    </div>

    <div id="right">
        <p>Правая половина</p>
        <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые - намеренно (например, юмористические варианты).</p>
        <p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или "невозможных" слов.</p>
    </div>
</body>
</html>

Демонстрация

P.S. Это тоже может быть интересно:

    None Found

10 Комментарии

  1. a

    На главной странице ссылки на эту статью нет, а в RSS — есть.

    1. Administrator (Автор записи)

      Статьи из раздела "Сниппеты" на главную страницу не выводятся.

  2. Andrew

    Два div'а с абсолютным позиционированием??? 

    И что Вы будете делать, если ниже этих колонок, имеющих произвольную и заренее неизвестную высоту, необходимо будет вывести подвал?

  3. Никита

    Отберите у школьников права на публикацию.

    1. Administrator (Автор записи)

      Школьников среди авторов нет.

  4. Administrator (Автор записи)

    Друзья, данный сниппет, впрочем как и другие, является одним из вариантов разбивки страницы на две равные колонки, поэтому не стоит его рассматривать как единственно верный. Существует 1000 и 1 способ разбить страницу или блок на колонки, равные по ширине/высоте. И ни про один из этих многочисленных способов нельзя сказать, что он будет единственно правильным, который должен применяться всеми. Поэтому данный сниппет можно применить не только к странице в целом, но и к отдельному блоку, а также в совокупности с другими приемами разметки страницы.

    1. вася

      Так или иначе этот способ является наиболее неоптимальным.

  5. Кач

    Интересно а как разделить страницу на две разноцветные части по 50% но по горизонтали? Т.е. когда первая часть расположена над второй.

    1. SelenIT

      Если нужно разделить видимую область на две половины по вертикали, то проще всего использовать единицу vh (min-height: 50vh). Либо стандартный вариант с html, body {height: 100%} и контейнерами c min-height: 50%.

  6. Александр

    Как сделать так чтобы слева формировались обьявления на покупку,а справа на продажу? Есть возможность переделать вышеописанный скрипт под это?

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.