Создаем макет для сайта из трех колонок с фиксированной шириной

Представляю один из вариантов создания макета сайта из трех колонок с фиксированной шириной.

Пример макета можно посмотреть по следующей ссылке

HTML код нашего макета:

<body>
<div id="back">
<div id="header">
<h3>Здесь располагается содержимое  header</h3></div>
<div class="column" id="column_c">
<div class="wrap">
WordPress — идеальная платформа для публикации, ориентированная на красоту, поддержку стандартов и удобство использования. WordPress бесплатен и 			свободен к распространению. Проще говоря, WordPress — это то, что вы используете, когда хотите работать над сайтом, а не бороться с ним. Здесь вы можете скачать свежие версии WordPress, почерпнуть полезную информацию из Кодекса или получить помощь на форуме поддержки. Подпишитесь на ленту проекта, чтобы быть в курсе событий.
</div>
</div>
<div class="column" id="column_l">
<div class="wrap"><strong>Левая колонка</strong><br /> 
WordPress — идеальная платформа для публикации, ориентированная на красоту, поддержку стандартов и удобство использования. WordPress бесплатен и свободен к распространению. Проще говоря, WordPress — это то, что вы используете, когда хотите работать над сайтом, а не бороться с ним. Здесь вы можете скачать свежие версии WordPress, почерпнуть полезную информацию из Кодекса или получить помощь на форуме поддержки. Подпишитесь на ленту проекта, чтобы быть в курсе событий.
</div>
</div>
<div class="column" id="column_r">
<div class="wrap"><strong>Правая колонка</strong><br />
WordPress — идеальная платформа для публикации, ориентированная на красоту, поддержку стандартов и удобство использования. WordPress бесплатен и свободен к распространению. Проще говоря, WordPress — это то, что вы используете, когда хотите работать над сайтом, а не бороться с ним. Здесь вы можете скачать свежие версии WordPress, почерпнуть полезную информацию из Кодекса или получить помощь на форуме поддержки. Подпишитесь на ленту проекта, чтобы быть в курсе событий.
</div>
</div>
<div id="footer">
<div><h3>Здесь располагается содержимое  footer</h3></div></div>
</div>
</body>

<body>

<h3>Здесь располагается содержимое header</h3></div>

WordPress — идеальная платформа для публикации, ориентированная на красоту, поддержку стандартов и удобство использования. WordPress бесплатен и свободен к распространению. Проще говоря, WordPress — это то, что вы используете, когда хотите работать над сайтом, а не бороться с ним. Здесь вы можете скачать свежие версии WordPress, почерпнуть полезную информацию из Кодекса или получить помощь на форуме поддержки. Подпишитесь на ленту проекта, чтобы быть в курсе событий.

</div>

<div class="wrap"><strong>Левая колонка</strong><br />

</div>

<div class="wrap"><strong>Правая колонка</strong><br />

</div>

<div><h3>Здесь располагается содержимое footer</h3></div></div>

</div>

</body>

Код CSS стилей:

body,html{
margin:0;
font: 100%/1.5 Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
#back{
width:1260px;
margin:auto;
}
.column{
float:left;
}
#column_l,#column_r{
background:#c8e19d;
}
#column_c{
margin-left:300px;
width:660px;
background:silver;
}
#column_l{
width:300px;
margin-left:-960px;
}
#column_r{
width:300px;
}
.wrap{
padding:10px;
}
#header{
text-align:center;
background:#cbb99d;
height:70px;
}
#header h3{
margin:0;
line-height:70px;
text-align:center;
}
#column_c{
position:relative;
}
#footer{
background:#fff99d;
clear:both; /*убираем  float*/
overflow:hidden;/*Убираем float - вариант 2*/
}
#footer div{
display:table-cell;
vertical-align:middle;
height:70px;
width:1260px;
text-align:center;
}

body,html{

margin:0;

font: 100%/1.5 Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

}

#back{

width:1260px;

margin:auto;

}

.column{

float:left;

}

#column_l,#column_r{

background:#c8e19d;

}

#column_c{

margin-left:300px;

width:660px;

background:silver;

}

#column_l{

width:300px;

margin-left:-960px;

}

#column_r{

width:300px;

}

.wrap{

padding:10px;

}

#header{

text-align:center;

background:#cbb99d;

height:70px;

}

#header h3{

margin:0;

line-height:70px;

text-align:center;

}

#column_c{

position:relative;

}

#footer{

background:#fff99d;

clear:both; /*убираем float*/

overflow:hidden;/*Убираем float - вариант 2*/

}

#footer div{

display:table-cell;

vertical-align:middle;

height:70px;

width:1260px;

text-align:center;

}

В этом примере реализации макета, используются отрицательные поля.