Трехколоночный макет
HTML-код:
<div id="container">
<div id="content">
<section id="left">
Фиксированная левая сторона
</section>
<section id="main">
Резиновое основное поле
</section>
</div>
</div>
<section id="sidebar">
Фиксированная правая сторона
</section>
CSS:
#container { /* Первая обертка */
width: 100%;
float: left;
margin-right: -297px;
}
#content { /* Вторая обертка */
margin-right: 297px;
}
#left { /* Левая колонка*/
width: 200px; /* ширина 200px */
float: left;
}
#main { /* Основная колонка */
margin-left: 300px; /* ширина 100% - 200px - 300px */
}
#sidebar { /* Правая колонка */
width: 297px; /* ширина - 300px */
float: right;
}
Двухколоночный макет
Точно таким же способом можно сделать двухколоночный макет.
HTML-код:
<div id="container">
<section id="main">
Резиновое основное поле
</section>
</div>
<section id="sidebar">
Фиксированная правая сторона
</section>
CSS:
#container { /* Первая обертка */
width: 100%;
float: left;
margin-right: -297px;
}
#main { /* Основная колонка */
margin-right: 297px; /* ширина 100% - 200px - 300px */
}
#sidebar { /* Правая колонка */
width: 297px; /* ширина - 300px */
float: right;
}
Комментарии
Нет комментариев к данной статье.
Комментарии