Портал о персональных компьютерах
Уважаемый читатель, устраивайтесь поудобнее и я познакомлю вас с принципами резиновой блочной верстки сайта.
Ранее рассмотренная нами фиксированная модель превращается в резиновую всего-на-всего заменой пикселной ширины блока В видеоуроке я установил ширину блока Без определенных стилей выравнивания блока сайт съедит в левую часть окна. И это, на мой взгляд, некрасиво. Хочется выравнять сайт посередине. Вот и вопрос, «как же это сделать?». А вот и ответ. Первое, что приходит в голову - это указать у элемента body
свойство text-align:center
. Казалось бы, все, включая текст на странице, должно выровняться по центру. А уж потом, для элемента wrapper
поменять центровку на выравнивание по левому краю (text-align:left).
Но это неверный подход (хотя все сработает в IE). В нормальных браузерах свойство text-align
устанавливает выравнивание только для текста внутри блока, к которому применяется данное свойство. Правильным будет указать равные левый и правый внешние отступы для элемента CSS-инструкция для блока wrapper
будет иметь такой вид: Margin-left: auto;
margin-right: auto;
Или в сокращенной форме: Margin: 0 auto;
Именно таким принципом необходимо руководствоваться при необходимости выровнять блок по центру родителя. Хозяйке на заметку:
блок, сформированный тегом Естественно, никакой центровки вы не добьетесь, т.к. границы центруемого блока уперлись в границы родителя. Ширина контейнера В случае директивы float:left (
или
float:right)
,
опять-таки, никакого выравнивания при помощи вышеописанного способа вы не добьетесь. Блок, с данной директивой, прилипнет своим левым краем (или правым) к родителю, а все остальные блоки нормального потока будут обтекать его справа (или слева). Поэтому ограничивайте ширину блока свойством width
(либо фиксированная ширина в пикселах, либо проценты) и, для понимания происходящего на странице, обводите блок border-ом. Например вот так: Border: 1px solid black;
В этом случае вы будите четко видеть границы верстаемого блока. Но помните, что в нормальных браузерах к размеру блока прибавится размер border-а (ненормальным оказывается браузер IE, в котором размер border-а не влияет на ширину блока). Это может привести к спрыгиванию обведенного блока с того места, которое он будет занимать без обводки. А теперь переходите к просмотру видео. О чем же пойдет речь в данном видеоуроке:
Видео с сервиса RuTube:
Первая часть видео с сервиса YouTube:
Вторая часть видео с сервиса YouTube:
Третья часть видео с сервиса YouTube:
Если хотите попрактиковаться, то можете скачать исходник верстки с Deposit Files (*.zip-архив 3.5 КБайт). Из-за алгоритмов сжатия сервиса RuTube серьезно страдает качество картинки. Если мелкие детали плохо видны, вы можете скачать видео с Deposit Files в лучшем качестве (*zip-архив с *wmv-файлом. Размер 53.9 МБайт). От автора:
приветствую дорогих читателей моего блога! Наверняка многие из вас уже слышали легенды о драконах, Санта-Клаусе и непонятном звере под названием резиновый веб-дизайн, который способен менять свою форму. О первом персонаже вам поведают рукописи Джона Толкина, о втором родители, а вот информацию о третьем я беру на себя. Как бы странно это не звучало, однако, в этой статье я постараюсь разжевать резиновый веб-дизайн и расскажу о его преимуществах и недостатках.
При разработке сайта веб-мастер, в первую очередь, должен отталкиваться от целей проекта. Если заказчику важно, чтобы веб-страница могла подстраиваться под любой экран монитора, то здесь на помощь придет резиновый (адаптивный) дизайн. Свое название данный формат получил благодаря тому, что его ширина устанавливается не в пикселях, а в процентном соотношении. С его помощью страница будет открываться на весь экран монитора независимо от разрешения. Чтобы ваша карьера веб-дизайнера стремительно развивалась, в обязательном порядке необходимо изучить это направление. Многие заказчики с уже собранной лояльной базой клиентов особенно требовательны к данному моменту, ведь они хотят обеспечить своим пользователям максимальное удобство. В качестве интересного наблюдения можно отметить тот факт, что в нашей стране «резиновый» веб-дизайн специалисты начали воспринимать с позитивной точки зрения раньше, чем на западе. Дело в том, что там при зарождении веб-направления в эту сферу пришло большое количество узкомыслящих полиграфистов. Зарубежные специалисты попросту не осознавали возможности создания нефиксированных графических разработок. А вот к нам понятия «веб» и «дизайн» пришли практически равномерно, вследствие чего подобная визуальная гибкость изображения воспринималась разработчиками как обычная творческая свобода. Зачастую люди путают эти два понятия, однако, они не являются чистокровными синонимами друг друга. Адаптивный веб-дизайн подразумевает работу с различными макетами сайта в целях создания максимального удобства их использования на всевозможных типах устройств, учитывая всевозможные разрешения экранов. Он «разумно» подгоняет общую картинку под экран в зависимости от размера дисплея на аппарате. Ну а резиновый дизайн - это, по сути, один из элементов адаптивного веб-дизайна. Он, в свою очередь, лишь вносит изменения в пропорции веб-страницы. Таким образом, можно прийти к выводу о том, что адаптивный веб-дизайн представляет собой комбинацию из резинового, а также прочих прогрессивных улучшений. Хотя из-за близких по духу определений порой и может возникать путаница. Особенно неприятно, когда разногласия в этом плане происходят с заказчиком, поэтому будьте внимательны и всегда уточняйте, что клиент имел ввиду, говоря о резиновом дизайне сайта. Благодаря резиновому дизайну css у вас есть возможность разработки веб-страницы, которая бы заполняла все свободное пространство браузера вне зависимости от размеров экрана. Если произойдут какие-либо изменения параметров, связанные с разрешением, вся структура сайта вновь подстроится под обновленные условия. Чудеса и волшебство, не правда ли? Подобная особенность гарантирует тот факт, что веб-страница полностью займет браузерное окно независимо от того, отображается картинка на малютке HTC или на 20-ти дюймовом широкоформатном мониторе. Именно это и можно отнести к основному преимуществу резинового дизайна. Те пользователи, которые обладают маленькими мониторами, не испытывают проблем с горизонтальными полосами прокрутки, а вот владельцев больших широкоформаток они порою тревожат. Следовательно, в этом плане вторые смогут сполна насладиться картинкой, ведь вся площадь дисплея будет эффективно задействована. Если рассматривать вопрос того, для каких сайтов подойдет резиновый веб-дизайн, то здесь все зависит опять же от целей заказчика. Данная визуальная гибкость будет хорошо смотреться на тех сайтах, у которых приоритетной задачей является размещение на одной веб-странице максимального количества контента, а эстетические нормы отходят на второй план. Именно исходя из этого резиновый веб-дизайн широко применяется при создании новостных порталов, блогов, а также всевозможных информационных сайтов. В этих случаях его применение наиболее целесообразно. Современные тенденции и подходы в веб-разработке Узнайте алгоритм быстрого роста с нуля в сайтостроении Помимо положительных моментов, подобный веб-дизайн обладает и некоторыми специфическими минусами. Один из них заключается в том, что, по сути, итоговый результат «автоподстраивания» страницы под определенные условия разрешения экрана непредсказуем. Некоторые графические элементы на сайте могут внезапно оказаться на другом месте, так как их вытеснили соседние коллеги. Еще одним недостатком подобной «резины» является тот факт, что загрузка страницы с ним может увеличиться в 2–3 раза по сравнению со стандартной длительностью. Случается это по причине придирчивости некоторых браузеров к макетам страниц данного формата. Они тяжело справляются с задачей отображения элементов переменной ширины, вследствие чего также повышается риск возникновения визуальных ошибок. Для наглядности я хочу продемонстрировать вам несколько удачных примеров резинового и адаптивного дизайнов от достаточно успешных разработчиков. Для начала рассмотрим резиновый сайт одного американского блогера, занимающегося параллельно веб-разработками. Полная версия сайта: Мобильная версия сайта: Как видим, в этом случае картинка лишь подстраивается под размеры устройства, а общая структура сайта остается неизменной. Теперь же предлагаю ознакомиться с веб-сайтом, который адаптируется под определенное устройство и в зависимости от его размеров перестраивает полностью собственную структуру. Полная версия сайта: Мобильная версия сайта: Вот так-то. Надеюсь, сегодняшний материал был интересен, и вы не зря потратили свое время. Если это так, то оставляйте комментарии по этому поводу и делитесь собственным мнением. Мне приятны как позитивные отзывы, так и экспертные заключения мастеров веб-дизайна 2.0. Подписывайтесь на блог, чтобы не пропустить дальнейшую интересную и полезную информацию. На этом у меня все, скоро увидимся! Современные тенденции и подходы в веб-разработке Узнайте алгоритм быстрого роста с нуля в сайтостроении Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой - использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера. У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать. Хочу предложить нехитрый вариант решения - ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS. Ещё раз акцентирую внимание:
в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе
, для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.
Дополняем HTML: Цель урока:
Знакомство с принципами блочной верстки для резинового дизайна сайта. Изучение основных свойств для построения резинового макета Резиновый дизайн сайта означает, что при изменении размеров окна браузера все слои масштабируются согласно текущей ширине
. Это и есть основное преимущество резинового дизайна: независимо от размеров экрана, вся его область будет занята, при этом не возникают лишние полосы прокрутки при использовании «маленького» монитора. «Резиновость» достигается за счет того, что определенные слои макета не имеют фиксированную ширину, приспосабливая свои размеры под размеры окна браузера
. Минусом данного типа дизайна являются «разногласия» между браузерами, необходимость применять «хитрости» css-стилей
, для того чтобы достичь необходимой кроссбраузерности. Дизайн CSS две колонки, пожалуй, самый популярный. Создать страницу с таким расположением колонок можно двумя способами, рассмотрим каждый отдельно. Рассмотрим пример, в котором присутствуют следующие блоки, изображенные на рис. 1
: шапка (бордовый), меню (светло-серый), контент (белый), подвал (темно-серый). Рис. 1. Резиновый дизайн сайта в две колонки Левую колонку выполним с фиксированным размером, а правая колонка будет занимать остальную ширину окна, что и обеспечит «резиновость» дизайна. Основные свойства
1. «Разбиваем» все основные элементы страницы на блоки следующим образом:
Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad
minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat. Duis te feugifacilisi.
2. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
#content{
margin-left: 21%;
} 2 вариант:
#content{
margin-left: 210px;
} Все остальные свойства зависят от оформления сайта. Весь код CSS будет выглядеть так:
#top { /* Шапка с заголовком страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 10px 0 10px 10px; /* Поля вокруг текста */
margin-bottom: 5px; /* Расстояние между шапкой и колонками */
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
}
#menu { /* Меню сайта */
width: 200px; /* Ширина меню */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
float: left; /* Состыковка со слоем контента по горизонтали */
padding: 3px; /* Внутренние поля */
}
#content { /* Основное содержание */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
margin-left: 210px; /* Отступ слева с учетом ширины левой колонки */
margin-bottom: 5px /* Отступ снизу */
}
#content p{
padding: 3px; /* Внутренние поля контента*/
}
#bottom { /* Подвал */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 3px; /* Поля вокруг текста */
} Результат:
Рис. 2. Левая колонка с фиксированной шириной в резиновом дизайне Рассмотрим пример, когда фиксированной шириной обладает не левая, а правая колонка. Правая колонка с фиксированной шириной: основные свойства
Код html-структуры остается прежним
, меняются лишь CSS-свойства. 1. Для левой колонки задаем свойства, обязательные при использовании резинового дизайна: float и width
#content{
margin-right: 21%;
} 2 вариант:
#content{
margin-right: 210px;
} Результат:
Рис. 3. Правая колонка с фиксированной шириной в резиновом дизайне При использовании данного варианта дизайна для левой или правой колонки устанавливается абсолютное позиционирование с заданием координат. margin-left: ...px; /* отступ слева, равный ширине первой колонки */ «Резиновость» достигается в данном случае за счет правой колонки, у которой нет определенной ширины. Пример:
Создать веб-страницу в формате резинового дизайна. Для левой колонки задать абсолютное позиционирование с координатами от левого и верхнего края окна браузера 1. Расположим основные html-элементы страницы следующим образом: Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
2. Для левой колонки задаем свойства, обязательные при использовании позиционирования в резиновом дизайне — position , width , left и top: #col1 { /* Левая колонка */
position: absolute; /* Абсолютное позиционирование */
width: 190px; /* Ширина блока*/
left: 0px; /* Координата от левого края окна */
top: 0px; /* Координата от верхнего края окна */
background: #800000; /* Цвет фона левой колонки */
padding: 5px; /* Поля вокруг текста */
} 3. Задаем свойства для правой колонки, обязательные при использовании позиционирования в резиновом дизайне — margin-left: #col2 { /* Правая колонка */
margin-left: 200px; /* Отступ слева=ширине левой колонки + padding */
background: #e0e0e0; /* Цвет фона правой колонки */
padding: 5px; /* Поля вокруг текста */
} 4. Удаляем лишние отступы браузера по умолчанию: body {
padding: 0; /* Отступы для браузера Opera */
margin: 0; /* Обнуляем значения отступов на веб-странице */
} Результат:
Рис. 4. Резиновый дизайн сайта с позиционированием На рис. 4
результат показывает, что колонки имеют неодинаковую высоту. Для того, чтобы колонки приобрели одинаковую высоту есть несколько вариантов использования дополнительных свойств, одним из которых является добавление границы (border). 1. Обе колонки заключаются в слой-контейнер: Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
2. Для левой колонки устанавливаем ширину, абсолютное позиционирование, координаты от верхнего левого угла браузера, внешний отступ слева отрицательного значения (!), равный ширине блока, и внутреннее поле слева, равное также ширине блока: #col1 { /* Левая колонка */
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
left: 0px; /* Положение от левого края окна */
top: 0px; /* Положение от верхнего края окна */
margin-left: -200px; /* внешний левый отступ отрицательного значения */
padding-left: 200px; /* внутренне левое поле */
background: #800000; /* Цвет фона левой колонки */
} 3. Для правой колонки никакие свойства позиционирования не устанавливаются, но можно задать свойства для оформления колонки: #col2 { /* Правая колонка */
background: #e0e0e0; /* Цвет фона правой колонки */
padding: 5px; /* Поля вокруг текста */
} 4. Для слоя контейнера необходимо задать границу, ширина которой должна совпадать с шириной левой колонки, а цвет — с цветом левой колонки: #container {
border-left: 200px solid #800000;
} Результат:
Рис. 6. Колонки одинаковой высоты Пару дней назад один посетитель данного сайта, Максим, попросил меня показать, как сверстан сайт сайт. Максим, дело в том, что весь контент сайта (любой страницы) сформирован таким образом, что полностью разъезжается на всю ширину окна браузера, не зависимо от разрешения экрана и абсолютной ширины монитора. Хотя сам я мало чего понимаю в html-верстке (профиль программера, а не верстальщика), но все же многолетняя совместная работа с верстальщиками не могла не сказаться положительно в плане моих познаний html/css. Конечно, любой прогер ASP.NET обязан хотя бы владеть основами html/css, иначе ничего путнего с чистого ASP.NET по получиться. Итак, смотри - вопрос заключается в следущих аспектах: а) как скомпоновать блоки на сайте так, что б сверху был один горизонтальный header, в центре три вертикальных блока, крайние заданной ширины и прилегающие к краям экрана, средний «резиновый» и размещающийся между крайними блоками. Под всеми этими блоками размещается futer, занимающий, как и header горизонтальное 100% положение. б) как заставить все блоки находиться в точно заданных позициях не накладываясь друг-на-друга и не съезжая при изменении внутри них контента. Верстка основана на тегах
Скажу, что в табличной верстке такое позиционирование задать проще простого. Одна таблица table, три строки tr и три столбца на каждую td. Верхняя и нижняя строки содержат по одному столбцу, colspan которых установлено в 3.
Средняя строка имеет 3 столбца. Ширина таблицы 100%. Вот и имеем резиновую верстку с точно позиционируемыми блоками. Почему я не использую табличную верстку сейчас объяснять не стану. Гораздо более интереснее увидеть стили, которые позволяют выше описанным div-ам занять свое место на екране.
#header
{
width: 100%;
margin: 0px;
text-align: center;
background-color:#ff9999;
}
#right
{
float: right;
width: 200px;
margin: 20px 0px 0px 0px;
text-align: right;
background-color:#99ff99;
height: 400px;
}
#middle
{
margin: 20px 220px 10px 220px;
background-color:#9999ff;
height: 400px;
text-align: center;
}
#footer
{
margin: 0;
border: solid 1px Dark;
background-color: #dbc1c1;
font-size: 10px;
text-align: center;
clear:both;
}
#left
{
background-color:#fdff5e;
margin: 20px 0px 0px 0px;
width: 200px;
float:left;
height: 400px;
}
Думаю, здесь все ясно как белый день. Дополнительные стили введены для того, что б было нагляднее увидеть местопозиционирование каждого блока.
А реально, всю ситуацию разруливает следующее:
#header
{
width: 100%;
}
#right
{
float: right;
width: 200px;
}
#middle
{
margin: 20px 220px 10px 220px;
}
#footer
{
clear:both;
}
#left
{
width: 200px;
float:left;
}
Ключевым свойством является float. Благодаря ему мы указываем блоку как позиционировать себя относительно соседнего блока. Соседний считается предыдущий и следующий в html-разметке. Именно в том порядке, в котором мы их указали на странице. Кстати Макс, попробуй правый и центральный блок поменять местами в разметке. И ты увидишь, что правый блок не приляжет к хедеру, а опустится под центральный. Я понимаю почему ты не мог так долго совладать с позиционированием – сам долго мучался пока заставил дивы ложиться так, как требуется. Поиграй с отступами и шириной блоков, что б добиться требуемой ширины и расстояний между блоками. А получиться должно следующее.Выравнивание блоков посередине в случае резиновой верстки на div-ах
Зарождение резинового веб-дизайна
Резиновый и адаптивный веб-дизайн - это одно и то же?
Преимущества резинового веб-дизайна
Недостатки резинового веб-дизайна
Примеры резинового и адаптивного веб-дизайна
1. http://www.simplebits.com/
2. http://www.fork-cms.com/
Фиксированная ширина макетной сетки
Вёрстку загоняют в горизонтальный габарит 960-980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко - тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.«Резиновая» макетная сетка по ширине окна
Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.
Ещё одна распространённая проблема этого решения - боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет. Update:
Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже - это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.
Создаём контейнер макета:
...
Оформляем его незатейливым кодом стиля:
div.page-container {
min-width: 960px;
max-width: 75%;
margin: 0 auto;
padding: 0;
}
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400-1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.
И немного меняем CSS:
div.page-container {
max-width: 75%;
min-width: 960px;
margin: 0 auto;
padding: 0;
}
div.page-container-inner {
min-width: 960px;
max-width: 1600px;
margin: 0 auto;
padding: 0;
}
Как видите - решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.
Две колонки в резиновой дизайне
Свойство float для создания эффекта плавающего элемента
<div
id
=
"top"
>
Заголовок сайта</
div
>
<div
id
=
"menu"
>
Ссылка 1<br
>
Ссылка 2<br
>
Ссылка 3<br
>
Ссылка 4<br
>
</
div
>
<div
id
=
"content"
>
<h1
>
Заголовок</
h1
>
<p
>
</
p
>
</
div
>
<div
id
=
"bottom"
>
Подвал
</
div
>
Заголовок
1 вариант:
#content
{
margin-left
:
210px
;
}
#top
{
/* Шапка с заголовком страницы */
/* Параметры рамки */
padding
:
10px
0
10px
10px
;
/* Поля вокруг текста */
margin-bottom
:
5px
;
/* Расстояние между шапкой и колонками */
font-size
:
24px
;
/* Размер шрифта */
font-weight
:
bold
;
/* Жирное начертание */
}
#menu
{
/* Меню сайта */
width
:
200px
;
/* Ширина меню */
background
:
#e3e8cc
;
/* Цвет фона */
border
:
solid
1px
black
;
/* Параметры рамки */
float
:
left
;
/* Состыковка со слоем контента по горизонтали */
padding
:
3px
;
/* Внутренние поля */
}
#content
{
/* Основное содержание */
background
:
#e3e8cc
;
/* Цвет фона */
border
:
solid
1px
black
;
/* Параметры рамки */
margin-left
:
210px
;
/* Отступ слева с учетом ширины левой колонки */
margin-bottom
:
5px
/* Отступ снизу */
}
#content
p{
padding
:
3px
;
/* Внутренние поля контента*/
}
#bottom
{
/* Подвал */
background
:
#e3e8cc
;
/* Цвет фона */
border
:
solid
1px
black
;
/* Параметры рамки */
padding
:
3px
;
/* Поля вокруг текста */
}
1 вариант:
#content
{
margin-right
:
210px
;
}
Применение позиционирования в резиновом дизайне
Например:
Левая колонка:
Выполнение:
<div
id
=
"col1"
>
<p
>
Ссылка 1<br
>
Ссылка 2<br
>
Ссылка 3<br
>
Ссылка 4<br
>
</
p
>
</
div
>
<div
id
=
"col2"
>
<p
>
</
p
>
</
div
>
Одинаковая высота колонок
<div
id
=
"container"
>
<div
id
=
"col1"
>
<p
>
Ссылка 1<br
>
Ссылка 2<br
>
Ссылка 3<br
>
</
p
>
</
div
>
<div
id
=
"col2"
>
<p
>
Контент. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
</
p
>
</
div
>
</
div
>
#container
{
border-left
:
200px
solid
#800000
;
}
