Сайт визитка - стилизуем центральную часть

Подробно на стилях останавливаться смысла нет - они достаточно просты. Сначала пропишем стили для заголовков и абзацев, используемых в документе. Эти стилевые правила будут общими для всех заголовков и абзацев на сайте, поэтому расположим их в самом верху css файла (сразу же после правил для body):

h1, h3 {
margin-bottom:20px;
text-transform:uppercase;
}
h1 {
font-size:24px;
font-weight:bold;
color:#000;
}
h3 {
font-size:18px;
}
h4 {
margin-bottom:5px;
line-height:15px;
font-weight:bold;
color:#000;
}
p {
margin-bottom:20px;
}

Блоку center_wrap задаем фиксированную ширину и выравниваем по центру страницы. Что бы он обрамлял все свои дочерние элементы (в том числе и плавающие), назначим ему свойство overflow:hidden;. В css файле пропишем стиль для него сразу же после стилей для блока slider_pic img:

.center_wrap {
margin:20px auto 0;
width:966px;
overflow:hidden;
}

Далее установим ширину для правой и левой колонок, прижмем их к правому и левому краям страницы соответственно, присвоим внутренние и внешние отступы. Для центральной колонки так же назначим ширину и с помощью свойства float:left; заставим ее разместиться сразу же за левым контейнером.

.right_colum, .left_colum {
padding:0 8px;
width:205px;
}
.right_colum {
margin-left:25px;
float:right;
}
.left_colum {
margin-right:25px;
float:left;
}
.center_colum {
width:474px;
float:left;
}

Остается написать стили для модулей и... дело в шляпе.

.modules {
margin-bottom:20px;
}
//модуль с баннерами
.banners img {
margin-bottom:15px;
padding-top:15px;
border-top:1px solid #dedede;
}
.banners img:first-child {
padding-top:0;
border-top:0;
}
//модуль номерами телефонов
p.sity, p.velcom {
margin-bottom:10px;
padding-left:25px;
line-height:22px;
font-size:14px;
font-weight:bold;
}
p.sity {
background:url(../images/sity.png) no-repeat left;
}
p.velcom {
margin:0;
padding-bottom:15px;
background:url(../images/velcom.png) no-repeat left -1px;
border-bottom:1px solid #dedede;
}
//модуль с новостями
.modules li {
padding-top:15px;
border-top:1px solid #DEDEDE;
}
.modules li:first-child {
padding-top:0;
border:0;
}
.modules li p {
margin-bottom:10px;
}
.modules li span {
font-size:10px;
font-style:italic;
color:#999;
}
.modules li a {
padding-bottom:15px;
display:block;
font-size:11px;
font-style:italic;
text-align:right;
color:#616161;
text-decoration:none;
}
.modules li a:hover {
text-decoration:underline;
}

Все, с главной страницей покончено. Ссылки на текущую версию верстки и демо версию сайта расположены ниже.

В следующей статье нас ожидает работа с внутренними страницами сайта.