Помогите, пожалуйста чайнику решить вопрос: как сделать так, чтобы футер всегда был снизу контента, при этом контент и меню расятягивались по мере добавления текста текстом (и что б меню было одинаковой длины с контентом).
И еще хотелось бы выровнять весь сайт по центру экрана (что б по бокам остались поля с фотом одинакового размера)
<html>
<head>
<title>CSS выравнивание по центру страниц сайта</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="реклама 2.JPG">
<div id="glavn">
<div id="header"><img src="шапка.jpg"></div>
<div id="knopki">
<table align="center" ><tr><td>
<a href="index.html">главная</a></td><td>
 </td>
<td><a href="статьи.html">статьи</a></td><td>
 </td>
<td><a href="объявления.html">объявления</a></td>
<td>
 </td>
<td><a href="новости.html">новости</a></td><td>
 </td>
<td><a href="контакты.html">контакты</a></td><td>
 </td>
</tr></table>
</div>
<div id="menu">
<hr>
<a href="Ссылка.html" class="hnews">
аааааааааааааааааааааааааааааааа</a>
<p class="news">ааааааааааааааааааааааааааааа <br />
аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа
аааааааааааа</p>
<a href="Определить.html" class="hnews">иииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииииии</a>
<p class="news">ааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа
аааааааааааааааааааааааа
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggggg</p>
<a href="Как исправить.html" class="hnews"> ggggggggggggggggggggggggggggggggg</a>
<p class="news">ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggg</p>
<a href="предотвратить.html" class="hnews">ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggg</a>
<p class="news">ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggg </p>
<a href="Ссылка2.html" class="hnews">
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg</a>
<p class="news">Эgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggg</p>
<hr>
</div>
<div id="content">
<font color="#333300"><u><h2>
Новости</h2></u><br><br>
<ul type="circle" >
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggg
<li><h3>ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggg</h3></li>
<H5>ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggg</H5>
<img src="фото.gif">
</ul>
</div>
</div>
<div id="footer"><img src="подвал2.jpg"></div>
</body>
</html>
css:
[CSS]
body{
width:800px;
padding:50px;}
#glav{
width:100%;
height:100%; float: left;}
#main{
width:800px;
margin-left: 400px;}
#header{
background:#3e4982;
width:95%;
height:100px;
text-align:center;
color:#FFFFFF;
font-size:24px;
position: absolute;
left:12px;
top:1px;}
#knopki{
width:95%;
position: absolute;
left:12px;
top:100px;}
#menu{
background: #696;
width:200px;
height:100%px;
color:#FFFFFF;
padding:10px; position: absolute; left:12px;
top:127px;}
a{
text-decoration:none;
color:#033;
font-size:18px;
}
a:hover
{color:#030;
text-decoration:underline;}
#content{
background:#ffffff;
height:171.5%;
width: 69.5%;
text-align:justify;
padding:30px; position: absolute; left:210px;
top:127px;
}
#footer{
background:#3e4982;
clear:both;
width:990px;
height:70px;
text-align:center;
color:#FFFFFF;
font-size:14px; float: center; clear: left;}
a.hnews {
color:#FFF;
text-align:left;
font-size:16px;
}
p.news {
color:#FFF;
text-align:right;
font-size:12px;}
div {border:1px red solid;}
[/CSS]
Заранее большое спасибо.
Сообщение сайта
Блочная вёрстка
Имя:
0 
28.4.2011, 20:02;
Ответить: Slavoz
Вёрстка лендинга + адаптивность
