Резиновый дизайн. Двухколонный макет
«Резиновым дизайном» будем называть структуру веб-страницы, которая автоматически приспосабливается под определенную ширину окна браузера пользователя. Такой макет имеет несколько преимуществ:
- используется все доступное пространство браузера;
- у пользователей с «маленькими» мониторами не возникает горизонтальных полос прокрутки;
- пользователи «больших» мониторов могут порадоваться, как эффективно используется вся площадь экрана, а значит деньги на монитор были потрачены не зря;
- веб-страницы удобно печатаются на бумаге любого формата.
Среди недочетов можно отметить придирчивость разных браузеров к «резиновому» макету и большая вероятность появления ошибок. В связи с чем повышается сложность верстки веб-страниц.
При верстке веб-страниц наиболее популярным является двухколонный макет, при этом одна колонка содержит набор ссылок для навигации по сайту, а вторая, более широкая — контент. Впрочем, хотя такая схема и представляет собой устоявшуюся традицию, это не значит, что обязательно ее следует придерживаться. Использование всей ширины окна позволяет более эффективно задействовать площадь веб-страницы. Так что можно добавить три, и даже четыре колонки. Это зависит исключительно от имеющегося объема информации. Учтите и обратный эффект — чем больше материала, тем больше рассеивается внимание посетителя, и ему сложнее становится ориентироваться на сайте.
На рис. 1 приведены типичные схемы размещения колонок. Красным цветом выделен заголовок страницы, светло-серым — область для навигации, рекламы, небольших текстовых вставок и т.д., а белым цветом — место для основного контента. Нижняя часть страницы, как правило, отводится для контактной информации, баннеров, кнопочек и других не самых существенных элементов.
 |
 |
 |
| а. две колонки | б. три колонки | в. четыре колонки |
Рис. 1. Варианты размещения колонок
Для создания двухколонного макета применяется два способа. Первый подход использует параметр float, позволяющий состыковывать один слой с другим по горизонтали, а второй основан на задании положения слоев через позиционирование. Несмотря на некоторые недочеты, оба подхода имеют место быть в арсенале верстальщика и их надо знать для лучшего понимания принципов работы со слоями.
Использование плавающих элементов
Термин «плавающий элемент» не очень удачен, тем не менее, порой встречается в литературе. Надо понимать, что никто никуда не плавает, так называют элемент, обтекаемый с разных сторон текстом или другими объектами веб-страницы. Параметр float добавляемый к слою определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.
Рассмотрим вариант, когда левая колонка имеет определенный размер, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера. При этом ширина левой колонки может задаваться в пикселах или процентах. В табл. 1 приведены основные стилевые параметры для формирования двух колонок.
| Для левого слоя шириной 20% | |
|---|---|
| Слой 1 float: left width: 20% |
Слой 2 margin-left: 21% |
| Для левого слоя шириной 200px | |
| Слой 1 float: left width: 200px |
Слой 2 margin-left: 210px |
Для первого слоя требуется всего два параметра: float — заставляет второй слой располагаться рядом по горизонтали с первым слоем и width, который устанавливает ширину колонки. Вторая колонка будет занимать все оставшееся место, поэтому для нее атрибут width не требуется.
Правый слой характеризуется лишь одним параметром — margin-left, он смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 1 указана 21%, где 20% сама ширина первого слоя, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.
В примере 1 приводится код веб-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена как 100 пикселов, оставшееся пространство занято колонкой с именем content.
Пример 1. Код для создания двух колонок
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/css">
BODY {
font-family: Verdana, Arial, sans-serif; /* Рубленый шрифт на странице */
}
#top { /* Верхняя часть с заголовком страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
padding: 15px 0 15px 10px; /* Поля вокруг текста */
margin-bottom: 15px; /* Расстояние между заголовком и колонками */
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: black; /* Цвет символов */
}
#menu { /* Навигация по сайту */
width: 100px; /* Ширина меню */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
float: left; /* Состыковка с другим слоем по горизонтали */
padding: 3px; /* Поля вокруг текста */
}
#menu A { /* Ссылки в меню */
font-size: 90%; /* Размер текста */
}
#content { /* Основное содержание страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
margin-left: 115px; /* Отступ слева */
margin-bottom: 15px /* Отступ снизу */
}
#bottom { /* Нижняя часть */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
font-size: 90%; /* Размер шрифта */
padding: 3px; /* Поля вокруг текста */
}
H1 { /* Заголовок страницы */
text-align: center; /* Выравнивание по центру */
font-size: 210%; /* Размер шрифта */
font-family: "Times New Roman", Times, serif; /* Шрифт с засечками */
font-weight: normal; /* Нормальное начертание */
color: black; /* Цвет текста */
padding: 0; /* Убираем значение полей */
margin: 0; /* Обнуляем значения отступов */
}
#content P {
font-size: 90%; /* Размер шрифта */
text-align: justify; /* Выравнивание по ширине */
padding: 10px; /* Поля вокруг текста */
margin: 0 /* Обнуляем отступы */
}
</style>
</head>
<body>
<div id="top">Заголовок сайта</div>
<div id="menu">
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
<a href="link4.html">Ссылка 4</a><br>
</div>
<div id="content">
<h1>Lorem ipsum dolor sit amet</h1>
<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. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi.</p>
<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. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
<div id="bottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
</div>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Результат создания двухколонного макета
Для формирования колонки заданной ширины справа, а не слева, код незначительно модифицируется. В табл. 2 показаны стилевые параметры, которые требуются для этого случая.
| Для правого слоя шириной 20% | |
|---|---|
| Слой 1 float: right width: 20% |
Слой 2 margin-right: 21% |
| Для правого слоя шириной 200px | |
| Слой 1 float: right width: 200px |
Слой 2 margin-right: 210px |
Расположение слоев в коде остается прежним, но значение атрибута float меняется на right, а параметр отступа на margin-right. Более никаких изменений не предполагается, поэтому пример 1 останется прежним и в нем только следует заменить стиль слоев menu и content на тот, что показан в примере 2.
Пример 2. Стиль для добавления меню справа
width: 100px; /* Ширина меню */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки вокруг */
float: right; /* Состыковка с другим слоем по горизонтали */
padding: 3px; /* Поля вокруг текста */
}
#content { /* Основное содержание страницы */
background: #e3e8cc; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
margin-right: 115px; /* Отступ справа */
margin-bottom: 15px /* Отступ снизу */
}
Заметьте, что положение слоев в коде HTML не меняется, вначале идет слой с именем menu, а потом уже content. Причем это правило действует всегда, независимо от того, как будут отображаться на веб-странице колонки — меню слева от контента или наоборот, справа. В любом случае модифицируется только код CSS.
Применение позиционирования
При формировании двухколонного макета левая или правая колонка устанавливается в заданное место через абсолютное позиционирование, а соседняя колонка освобождает для нее место за счет применения отступов. Для лучшего понимания рассмотрим пример, когда левая колонка имеет заданную ширину 200 пикселов, а ее положение определяется от левого верхнего угла окна браузера. Стиль для таких колонок приведен в примере 3.
Пример 3. Абсолютное позиционирование колонки
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
left: 0; /* Положение от левого края окна */
top: 20px; /* Положение от верхнего края окна */
background: #fc0; /* Цвет фона левой колонки */
}
#rightcol { /* Правая колонка */
margin-left: 210px; /* Отступ слева */
background: #ccc; /* Цвет фона правой колонки */
}
Значение absolute свойства position позволяет задавать положение слоя относительно края окна браузера независимо от наличия и местоположения других слоев. Сами координаты устанавливаются с помощью параметров left, top, right и bottom, которые соответственно определяют расстояние от левого, верхнего, правого и нижнего края окна. Чтобы левая и правая колонка не накладывались друг на друга, следует добавить отступ слева (margin-left) для слоя rightcol, как показано в данном примере. Значение этого отступа включает расстояние от левого края (параметр left) и ширину левой колонки (width) плюс дистанция между колонками.
Замечание
В любом браузере уже заложены отступы между краем окна и отображаемым в окне контентом. Поскольку значения отступов в разных браузерах могут различаться, то это влияет на вид и положение колонок макета. В подобных случаях лучше принудительно установить отступы с помощью атрибута margin, добавляя его к селектору BODY (см. пример 4).
Окончательный код для создания двух колонок с помощью позиционирования приведен в примере 4.
Пример 4. Двухколонный макет
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Две колонки</title>
<style type="text/css">
BODY {
padding: 0; /* Отступы для браузера Opera */
margin: 0; /* Обнуляем значения отступов на веб-странице */
}
#leftcol {
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
left: 0; /* Положение от левого края окна */
background: #800000; /* Цвет фона левой колонки */
padding: 5px; /* Поля вокруг текста */
}
#leftcol A {
color: white; /* Цвет ссылок */
}
#rightcol {
position: relative; /* Относительное позиционирование */
margin-left: 200px; /* Отступ слева */
background: #e0e0e0; /* Цвет фона правой колонки */
padding: 10px; /* Поля вокруг текста */
}
H1 {
margin: 0; /* Убираем отступы */
}
</style>
</head>
<body>
<div id="leftcol">
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
<a href="link4.html">Ссылка 4</a><br>
</div>
<div id="rightcol">
<h1>Lorem ipsum dolor sit amet</h1>
<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. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</p>
</div>
</body>
</html>
При использовании позиционирования примите во внимание следующие моменты.
- Слой с абсолютным позиционированием располагается поверх остальных слоев, поэтому если в макет предполагается добавить «шапку» или «подвал», убедитесь, что все слои отображаются корректно, без наложения. Это правило особенно важно в том случае, если в колонке, координаты которой заданы абсолютно, располагается много информации, что приводит к увеличению ее высоты.
-
Браузер Firefox к ширине слоя, которая определяется атрибутом width, добавляет значение полей и отступов. В этом браузере ширина левой колонки данного примера отличается от ширины в браузере Internet Explorer. Чтобы замаскировать различия, для правой колонки введено свойство position: relative, за счет него правая колонка накладывается поверх левой, скрывая «лишние» выступы.
| Статья опубликована: 15.05.2006 | Последнее обновление: 14.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
coolreal
15.05.2006
в продолжение темы вопросик:
я сделал резиновый макет, поля задаются процентами float: right; width: 20% и margin-right: 21%.
Во втором поле мне нужно сделать еще одно разделение и желательно, чтоб под левую колонку отводилось 70%, я делаю внутри слоя content еще два слоя с float: right; width: 70% и margin-right: 71%, но ИЕ считает их от ширины браузера, а ФФ от ширины слоя контейнера.
Как выкрутиться??
Влад Мержевич
15.05.2006
<!--[if IE]>
<style type="text/css">
#content2 {width: 70%}
</style>
<![endif]-->
Вставлять этот код надо в BODY.
Дмитрий
16.05.2006
Шапка, Три колонки, Подвал.
Шапка произвольной высоты.
Левая колонка - шириной 150px от шапки до подвала вся красная.
Правая колонка - по анологии с левой, только синяя.
Центральная колонка - оставшееся место.
Подвал произвольной высоты, примыкающий к нижнему краю окна просмотра ВНЕ зависимости от наличия содержимого текста на странице (т.е. даже если его СОВСЕМ нет)
Да. Напоминаю: все три колонки должны начинаться впритык от шапки и заканчиваться ВПРИТЫК к подвалу.
Вот пока этот вопрос не будет реш?н вменяемым образом, считаю, что CSS нужен чисто для оформления, а никак не для верстки. И жалкие возгласы СУПЕРКОДЕРОВ о том, что "семантически не верно верстать таблицами, для меня пустой звук. table + div = мир_во_всем_мире!
Влад Мержевич
17.05.2006
А задача для верстки слоями поставлена некорректно.
Демид
17.05.2006
как z-index, чтобы было все "красное". А насчет пустого места есть параметр float b position. Вменяемо?
klx
17.05.2006
все тот же пример:
3 колонки, шапка и футер. конечно все 5 слоев разного цвета. колонки начинаются от шапки и кончаются уткнувшись в футер.
контент изменчив - не известно в какой колонке его окажется больше и где останется свободное место.
можете кинуть сюда примерчик такого лейаута на слоях??? пожалуйста! это единственное серьезное НО которое мне не позволяет осваивать верстку на слоях.
однажды делал верстку такого лейаута на слоях и т.к. не имел простого решения, то применял ко всем слоям высоту через js которая высчитывается после подгрузки контента.
p.s. как я понял реккомендация с z-index прокатит только если контента меньше в цветной колонке.. или я ошибаюсь??
Artleo
28.05.2006
Влад Мержевич
29.05.2006
Dim
28.06.2006
по моему все есть? или я не о том?
Влад Мержевич
29.06.2006
smile
10.07.2006
Влад Мержевич
17.07.2006
Nwen
23.07.2006
mambet
12.10.2006
Влад Мержевич
13.10.2006
При переходе на верстку слоями надо отказываться от "табличного" мировозрения и мыслить категориями слоев, а не говорить: "вот вам таблица, сделайте точно также на слоях". Если от подобного мировозрения отказаться, то большинство так называемых "проблем" просто исчезнет.
Михаил
10.01.2007
Влад Мержевич
11.01.2007
Sergey
25.01.2007
Роман
30.01.2007
Ну теперь вопрос по теме...
Двухколоночный "резиновый" дизайн на DIV`ах конечно хорошо, но вот у меня все хорошее заканчивается когда в DIV содержимого я добавляю IFRAME. Нужно чтобы он растягивался по ширине родительского контейнера, но при параметре width:100%, в IE6 фрейм растягивается по ширине окна браузера.
Собственно вопрос: как подружить подобный шаблон и димамический контент?
На крайний случай собираюсь применять AJAX, но это уже совсем другая история. Делать сайт в котором просмотр содержимого 100% завязан на яваскрипт, это не особо привлекательный вариант...
P.S. В разделе "Использование плавающих элементов" опечатка. Одно и то же предложение два раза повторяется.
Велимир
01.02.2007
А так весь сайт просто супер. Лучший справочник который я когда либо видел, с учетом полного не знания иностранных языков.
Алексей Фурманов
04.02.2007
Алексей Фурманов
05.02.2007
Влад Мержевич
07.02.2007
Я уже сталкивался с идеей SEO размещать контент в коде выше через абсолютное позиционирование. Но как показывает опыт и разные факты, поисковики может и обращают на это внимание, но не ставят во главу угла. Так что подобная идеология только вредит верстке, ведь приходится учитывать множество противоречивых факторов.
Что касается резинового дизайна, то он строится на использовании процентов в качестве значений ширины. Также активно применяются отступы и автоматическое вычисление ширины слоев. В общем, надо приобрести некоторый опыт верстки слоями, чтобы пришло понимание, как делать ту или другую фичу.
Nolan
24.02.2007
Слоями можно сверстать любую макетную сетку. Главное - изначально мыслить слоями, понимать <психологию их поведения>. А это приходит с опытом.
REDucka
15.04.2007
av
27.04.2007
Беру пример с этой страницы двухколонного макета. (рис. 2)
Теперь хочу в слое #content сделать 3 колонки равной ширины.
т.е. 3 дива с width:33% и float: left;
В FireFox'е и Opera вс? ок, но IE упорно считает 33% от ширины экрана
Неужели не существует рецепта и придется колонки делать c gjvjom. таблиц?
Влад Мержевич
02.05.2007
Есть такая ошибка у IE6, для него придется ширину задавать иную, чем для браузера FF.
Канителька
17.05.2007
И вопрос такой как и у Av:
если поместить внутрь #content разбиение на колонки (как в вашем первом примере), то во второй колонке, у которой мы задаем margin-left:21% (в процентах), этот марджин не срабатывает в IE6. Так какую ширину надо задавать и кому?
dreamer
21.05.2007
top{display: inherit или block или inline} - ставьте навороченные html редакторы(типа мокромедии или голайф, если лень юзать справки на английском, за1но они помогут проверить код на ошибки (валидность))
tov. Me
23.05.2007
Выше уже приведена ссылка http://www.webmascon.com/topics/coding/13a.asp
Там приводится пример создания сайта с высотой всех слоев до подвала (и с растяжкой при увеличении количества контента).
Codak
29.05.2007
VinGood
30.05.2007
<table>
<tr>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
<td>wqrqwr</td>
<td>sfgsdf_wqq</td>
</tr>
</table>
Когда уменьшаю ширину экрана в IE6 до того, пока таблица не поместится в экран, весь контент спрыгивает вниз и позиционируется по высоте ниже левого меню, как с этим бороться, в FF все нормально. А то я уже не зню что и делать. Заранее благодарю.
S.
30.06.2007
Вам ребята что надо, сверстать громоздкую лабуду на слоях или же нужна легкая и качественная страница?
sciko
04.07.2007
Дмитрий
11.07.2007
используйте margin-left: 1px;
BoyKot
12.07.2007
заказчик требует чтобы "подвал" типа
"Terms of use | Privacy statement | Contact us"
был стабильно в самом низу окна браузера.
при этом небоходимо чтобы заголовок и подвал имели фиксированную высоту по 100px, а контент между ними растягивался по всей доступной оставшейся высоте окна
изначально делал это все на таблицах, но ИЕ упорно не хочет средний ряд растягивать на всю доступную площадь окна при фиксированных заголовке и подвале (в режиме соотв. стандартам), что только не пробовал и не применял
думаю решить эту проблему с помощью слоев
единственное что пока придумал это абсолютное позиционирование подвала, но тогда он при увеличении размера среднего (контент) ряда "наежает" на контент, что естественно недопустимо
заранее спасибо за помощь
Tim-Tim
17.07.2007
иначе в случае, когда меню по высоте больше контента, подвал будет
"обтекать" меню.
Алексей
22.07.2007
Влад Мержевич
24.07.2007
Денис Назаренко
30.08.2007
Ольга
25.09.2007
Такая проблема: в IE в неразвернутом окне при сдвиге до ОПРЕДЕЛЕННОГО уровня происходит резкий скачок влево, т.е. поля справа с 20px увеличиваются до 100px. Не пойму что это. Вниз ничего не съезжает, просто увеличиваются поля справа. Что делать?!???Пожалуйста, помогите.
Ольга
02.10.2007
Ромео
08.10.2007
Ольга
15.10.2007
Олег
17.10.2007
"Правый слой характеризуется лишь одним параметром - margin-left, он смещает левый край колонки на ширину ПРАВОГО слоя, плюс задает отступ между колонками."
Нужно: не правого, а левого.
unknown
19.10.2007
Влад Мержевич
21.10.2007
2 unknown
Никак.
Виктор
27.12.2007
а то например если окно "сплющить" то текст вытягивается вниз... что не есть хорошо
Влад Мержевич
28.12.2007
Shock
21.01.2008
Александр
21.01.2008
Георгий
28.01.2008
DokSna
15.02.2008
blackFFFFFF
06.03.2008
Вот пример на скорую руку. Исходя из материалов статей этого сайта:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Тест</title>
<style>
#wrapper{
position: absolute;
top : 0px;
left : 0px;
margin : 0px;
padding: 0px;
background-color: lime;
width: 100%;
}
br.clear{
clear: both;
}
#header{
width: 100%;
height: 150px;
position: releative;
background-color: silver;
}
#left{
position: absolute;
top: 150px;
left: 0px;
width: 30%;
float: left;
background-color: green;
}
#right{
position: absolute;
top: 150px;
left: 0px;
width: 30%;
margin-left: 70%;
float: right;
background-color: blue;
}
#center{
position: absolute;
top: 150px;
left: 0px;
margin-left: 33%;
margin-right: 33%;
width: 30%;
background-color: red;
}
#bottom{
position: releative;
width: 100%;
background-color: yellow;
height: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">Это шапка</div>
<br class="clear"/>
<div id="left">Левый столбец</div>
<div id="right">Правый столбец</div>
<div id="center">Центральная часть</div>
<br class="clear"/>
<div id="bottom">Низ</div>
</div>
</body>
</html>
Здесь 30% на 30% и на 30% резиновый дизайн (проверено ИЕ 7.0, Файрфокс 2.0, Опера 9.26)
Из объяснений - все три колонки контента абсолютно позиционируются на странице. Ширину проставляем 30% и задаем отступы. Для левой колонки выставляем float: left, для правой float: right и задаем margin слева и справа. Для центральной задаем margin-right и margin-left соответственно.
Strelok
14.03.2008
RIDLER
26.03.2008
Darhark
30.05.2008
Я вообще удивляюсь, где вы находите заказчиков, которым нужен не "3хколоночный дизайн с высотой от шапки до футера и 100% блочная верстка" одновременно, и у которых "много нулей" не вызывает немедленного желания найти новых исполнителей. Делитесь инфой ))
Lanna
18.07.2008
но из личного опыта советую для начала разобрать на готовых примерах http://www.graphicson.com/html/portfolio.html,layouts, а уже потом, осмыслив структуру, начинать самостоятельно верстать странички. Пользуясь таким методом процесс изучения заметно ускорится