Данный урок CSS верстки расскажет об одном из самых простых способов вёрстки в несколько столбцов, без использования таблиц.
Основой наших столбцов будет CSS, поэтому
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах - в коде):
/* Задание стилей всего блока */
#body {
width:900px; /* Установка ширины блока в 900 пикселей */
}
/* Задание стилей левого столбца */
#left {
float:left; /* Установка обтекания */
width:300px; /* Установка ширины столбца */
background:#aeddff; /* Установка фонового цвета */
height: 300px; /* Установка высоты столбца */
}
/* Задание стилей правого столбца */
#right {
float:right; /* Установка обтекания */
width:300px; /* Установка ширины столбца */
background:#ffecbe; /* Установка фонового цвета */
height: 300px; /* Установка высоты столбца */
}
/* Задание стилей среднего столбца */
#center {
margin-left:300px; /* Установка отступа */
margin-right:300px; /* Установка отступа */
background:#beffc0; /* Установка фонового цвета */
height: 300px; /* Установка высоты столбца */
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
[code]<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="left">Текст в левом столбце</div>
<div id="right">Текст в правом столбце</div>
<div id="center">Текст в среднем столбце</div>
</div>
</body>
</html>
4) Сохраняем и смотрим, что получилось.
Способ довольно прост, тем не менее эффективен и гибок. Он допускает любое форматирование столбцов и их содержания.
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.x; Oprea 9.xx
ДемоПо материалам сайта:
Российская школа CSS
