Как известно, трехсекционная схема веб-шаблона, снабженная к тому же "хедером" и "футером" легко получается только при использовании таблицы. С помощью SCC можно получить только то или иное приближение к идеалу.
В незапамятные времена нашел я в сети вот такое решение:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.alistapart.com/d/negativemargins/ex5.htm -->
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Example 5: Negative Margins</TITLE>
<META http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<STYLE type=text/css media=screen>#header {
BORDER-RIGHT: #cecea5 1px solid; BORDER-TOP: #cecea5 1px solid; BACKGROUND: #d7dabd; BORDER-LEFT: #cecea5 1px solid; BORDER-BOTTOM: #cecea5 1px solid
}
#outer_wrapper {
BACKGROUND: url(background_3.gif) #fff repeat-y left 50%
}
#wrapper {
BACKGROUND: url(background_2.gif) repeat-y right 50%
}
#container {
BACKGROUND: url(background_2.gif) repeat-y right 50%; FLOAT: left; WIDTH: 100%; MARGIN-RIGHT: -200px
}
#content {
BACKGROUND: url(background_3.gif) repeat-y left 50%; MARGIN-RIGHT: 200px
}
#main {
MARGIN-LEFT: 150px
}
#left {
FLOAT: left; WIDTH: 150px
}
#sidebar {
FLOAT: right; WIDTH: 200px
}
#footer {
BORDER-RIGHT: #cecea5 1px solid; BORDER-TOP: #cecea5 1px solid; BACKGROUND: #d7dabd; BORDER-LEFT: #cecea5 1px solid; BORDER-BOTTOM: #cecea5 1px solid
}
H1 {
MARGIN-TOP: 0px
}
.last {
MARGIN-BOTTOM: 0px
}
.clearing {
CLEAR: both; HEIGHT: 0px
}
</STYLE>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV id=header>header</DIV>
<DIV id=outer_wrapper>
<DIV id=wrapper>
<DIV id=container>
<DIV id=content>
<DIV id=left>
<H1>navbar</H1>
<UL>
<LI>link one
<LI>link two </LI></UL></DIV>
<DIV id=main>
<H1>content</H1>
<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu.</P>
<P class=last>Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing,
ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna
diam sed tellus. Etiam semper sapien eget metus.</P></DIV></DIV></DIV>
<DIV id=sidebar>
<H1>sidebar</H1>
<P>Here be your sidebar. Add whatever content you may desire.</P></DIV>
<DIV class=clearing></DIV></DIV></DIV>
<DIV id=footer>footer</DIV></BODY></HTML>
А кто может предложить иные варианты?
Вот это можно взять за основу. Простая верстка, имеющая только "хедер" и "футер":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Прижимаем футер к низу с помощью css</title>
<style>
html, body{
padding:0;
margin:0;
height:100%; /* Задаём 100% высоту для html и body */
position:relative; /* Если этого не задать, в Опере почему-то футер не прижимается сразу,
прижимается только после ресайза окна, какой-то странный глюк*/
}
#container{
width: 990px;
margin: 0 auto;
background:#FFF; /* Просто, чтобы было видно контейнер */
min-height:100%; /* Задаем минимальную высоту 100% */
_height:100%; /* Задаем высоту 100% в ИЕ6 с помощью хака */
}
#main{
padding-bottom:107px; /* Задаём нижний отступ, равный высоте футера, можно задать и больше,
но главное, чтобы не было меньше, иначе футер налезет на контент*/
}
#footer{
clear: both;
width: 990px;
margin: 0 auto;
background:#36F;
height:107px; /* высота футера */
margin-top:-107px; /* отрицательный маргин, равный высоте футера */
position:relative; /* Чтобы футер "всплыл" из под дива #container, если этого не сделать, то ссылки в футере не кликабельны и нельзя выделить текст*/
background: url(images/footer.jpg) no-repeat;
}
#header{
position:relative;
background: url(images/header.jpg) no-repeat;
height: 174px;
}
</style>
<body>
<div id="container">
<div id="main" style="background-color:#00ff00;">
s
<div style="clear: both; font-size: 0px; height: 24px;"> </div>
</div>
</div>
<div id="footer" style="background-color:#ff0000;">
f
</div>
</body>
</html>
Уроки фотографии
Профессиональное: Верстка по сценарию...
Livejournal 
Я.ру 
Buzz