css, html, php, javascript, jQuery, ajax … – решения, примеры, рецепты
13 Янв
Двинемся дальше, и попробуем создать макет страницы с двумя колонками, изменяющими свою ширину в зависимости от ширины окна браузера, т.е. «резиновый» макет. И сначала создадим HTML-разметку, форматировать которую будем с помощью стилевых таблиц.
<div id="header"> ... шапка страницы ... </div> <div id="content"> ... основное содержимое страницы ... </div> <div id="sidebar"> ... колонка меню ... </div> <div id="footer"> ... подвал ... </div>
А теперь css код, который сформирует нужное нам визуальное представление:
#content {
float:left;
width:67%;
background-color:#CCC;
}
#sidebar {
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}
Мы используем свойство float для того, чтобы задать положение блока content на странице и задаем ширину этого блока равной двум третям окна браузера. В соответствии с правилами CSS, последующее содержимое включенное в «плавающую модель», а в нашем случае это блок sidebar, будет «обтекать» блок content со стороны, противоположной направлению выравнивания, т.е. справа.
Свойство float работает примерно как атрибут align, который применяется в HTML, но дает больше возможностей управления отображением элементов за счет использования полей, рамок и отступов.
Разный цвет фона блоков задан лишь для того, чтобы Вам легче было наблюдать границы блоков, если Вы вдруг захотите испытать этот пример.
И наконец в блоке footer используется свойство clear для того, чтобы обеспечить его отображение гарантировано ниже любого элемента из «плавающей модели».
Правда такой вариант имеет недостаток. При наличии в блоке sidebar содержимого большего объема, чем в блоке content, «лишнее» содержимое перестает обтекать блок content и занимает всю ширину окна браузера.
Устранить недоразумение возможно, если подкорректировать значения левого отступа или левого поля элемента sidebar. Так мы и поступим, записав margin-left:67%; Посмотрите приведенный ниже окончательный css код.
#content {
float:left;
width:67%;
background-color:#CCC;
}
#sidebar {
margin-left:67%;
background-color:#FFC;
}
#header {
background-color:#FCF;
text-align:center;
}
#footer {
clear:both;
text-align:center;
background-color:#CFF;
}
Буду рад, если этот рецепт кому-нибудь пригодится.
Отзывов (2) на «CSS: верстка «резинового» макета из двух колонок»
А вот случайно не подскажете мне.
я столкнулась с проблемой. У меня похожий макет страницы только меню слева. Просто sidebar и content поменяны местами.
А проблема вот в чем, что если в content будет таблица с большим количеством столбцов и она не будет помещаться в окно браузера, то в IE весь правый слой content сползает вниз. При этом в FF хорошо – появляется полоса прокрутки.
Но еще есть и другая проблема и в IE, и в FF: слои header и footer растягиваются только на ширину браузера и при прокрутке направо видно как они обрезаются.
Как мне сверстать макет в этом случае.
Тут статья про резиновую верстку.. Похоже, этот вариант подойдет предыдущему комментатору…
http://www.webmascon.com/topics/coding/43a.asp
ps. дату комментария видел.. мало ли.. вдруг кому ещё пригодится …
Оставьте отзыв