Footer к низу страницы

[fry]

Описание проблемы: Если текст на странице большой, то футер спокойно прилепляется к низу страницы. Если текста мало - футер прилепляется под текстом. Как его прилепить к низу страницы?

CSS-код

#holder { padding:0 20px; min-width:955px; min-height:100%; height:auto !important; height:100%; margin-bottom:-4px; }
.head { height:167px; position:relative; }

.head .logo { position:absolute; top:0; right:6%; width:171px; height:144px; }
.head .logo .text { position:relative; top:27px; margin-left:-26px; float:left; }
.head .logo .corner { display:block; width:29px; height:144px; }
.head .logo .left { float:left; }
.head .logo .right { float:right; }
.information { font-family: Arial, sans-serif;
font-size: 30px;
padding-left:40px; 
padding-right:40px;
padding-top:70px;
}

.head .menu { position:absolute; top:125px; left:-12px; width:100%; font-size:94%; text-transform:uppercase; }
.head .menu li { float:left; padding-right:3.4%; padding-left:12px; font-family:Georgia, serif; }
.head .menu li span { color:#ff0000; font-weight:bold; font-family:Georgia, serif; }
.head .menu li a { font-family:Georgia, serif; }
.head .menu li a span { color:#000000; }
.head .menu li.hasSubMenu { position:relative; margin-left:-10px; }
.head .menu li.hasSubMenu a { color:#ff0000; height:1em; line-height:1em; }
.head .menu li.hasSubMenu span { color:#ff0000; }
.head .menu li.hasSubMenu span.arrow { position:relative; width:0.5em; top:-1px; margin-right:4px; height:1.1em; line-height:1.1em; font-size:102%; font-family:Arial; color:#828282; font-weight:normal; }
.head .menu li.hasSubMenu li { }
.head .menu li.hasSubMenu ul { position:absolute; left:4px; bottom:14px; }
.head .menu li.hasSubMenu ul li { float:none; padding:0 0 4px 12px; white-space:nowrap; }
/*
.head .menu li.important a { color:#000000; font-family:Georgia, serif !important; }
.head .menu li.important a span { color:#ff0000; font-family:Georgia, serif !important; }
*/

.head .blogLink { position:absolute; top:125px; right:0; font-size:94%; font-weight:bold; text-transform:uppercase; font-family:Georgia, serif; }
.head .blogLink span { color:#000000; font-weight:bold; font-family:Georgia, serif; }

.head .contacts { position:absolute; top:25px; left:8%; padding-top:5px; font-family:Arial; }
.head .contacts .phone { font-size:190%; }
.head .contacts a { position:relative; font-size:105%; top:3px; }

.body { height:100%; min-height:100%;}
.body .centerMain { height:245px; margin:0 -20px 0 -20px; padding:0 20px; background:#f6f7f2; }


.body .itemContent { width:100%; font-family:Arial; margin-left:0.3em; }
.body .itemContent p { font:normal 110%/1.5em Arial; padding-bottom:0.8em; }
.body .itemContent p.also { color:#555555; font-style:italic; }
.body .itemContent p.also a { color:#555555; }
.body .itemContent .info { width:66%; padding-bottom:25px; }
.body .itemContent .screenshot { float:left; margin-left:-5px; position:relative; }
.body .itemContent .note { float:left; width:20%; padding:10px 0 0 20px; margin-left:-10px; font-style:italic; }
.body .itemContent .resume { margin-left:-50px; padding-top:50px; font-size:91%; color:#555555; position:relative; zoom:1; }
.body .itemContent .resume .title { float:left; width:50px; padding-top:1px; font-size:110%; }
.body .itemContent .resume .text { float:left; width:76%; }
.body .itemContent h1 { font-family:"arial"; font-size:37px; padding-bottom:0.7em; }
.body .itemContent .item { float:left; width:100%; margin-left:7.5%; margin-top:-30px; }
.body .itemContent .item34 { float:left; width:63%; }
.body .itemContent .goToItem { color:#555555; }
.body .itemContent .goToItem .arrow { font-size:230%; line-height:1.3em; }
.body .itemContent .goToItem .ctrl { position:relative; top:-0.27em; }
.body .itemContent .goToItem a { font-size:100%; line-height:1.1em; }
.body .itemContent .goLeft { float:left; width:8.2%; margin-top:0px; }
.body .itemContent .goLeft .ctrl { margin-left:3px; }
.body .itemContent .goRight { float:left; width:8.2%; text-align:right; margin-top:0px; margin-left:81%; position:absolute; }
.body .itemContent .goRight78 { float:right; width:15.2%; text-align:left; }
.body .itemContent .goRight .ctrl { margin-right:3px; }



.body .itemContent div#header{position:relative}
.body .itemContent div#header h1{height:80px;line-height:80px;margin:0; padding-left:10px;background: #EEE;color: #79B30B}
.body .itemContent div#header a{position:absolute;right:0;top:23px}
.body .itemContent div#content p{line-height:1.4}
.body .itemContent div#navigation{background:#B9CAFF}
.body .itemContent div#extra{background:#FF8539}
.body .itemContent div#footer{background: #333;color: #FFF}
.body .itemContent div#footer p{margin:0;padding:5px 10px}
.body .itemContent div#footer a{display:inline;padding:0;color: #C6D5FD}

.body .itemContent div#wrapper{float:left;width:100%}
.body .itemContent div#content{margin: 0 25%}
.body .itemContent div#navigation{float:left;width:25%;margin-left:-100%}
.body .itemContent div#extra{float:left;width:25%;margin-left:-25%}
.body .itemContent div#footer{clear:left;width:100%}
.ulspisok { display:list-item; }
.clientsinfo {
width:50%; float:left; margin-left:-2%; margin-right:30px; 
}
.body .itemContent .clientsinfo .text {
width:100%; float:left; font-size:13px; line-height:18px; margin-right:30px;
}
.notecs { width:200px; margin-left:82%; top:342px; position:absolute; margin-right:2% }
.body .itemContent .notecs h1 { font-size:23px; margin-bottom:-10px; }
.body .itemContent .notecs span { display:block; line-height:21px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
.clientsinfo h1 { font-size:60px; }
.body .itemContent .clientsinfo h1 { font-family:Georgia, "Times New Roman", Times, serif; font-size:60px; padding-bottom:0.7em; }
.imgnews { width:20%; float:left; margin-left:3%; margin-top:10px; }
.foot { position:relative; margin:50px 8.2% 0 8.2%; padding-top:23px; background:url(../img/curve.gif) 0 0 repeat-x; }
.foot .subFoot { /*position:relative; zoom:1;*/ }
.foot .block { float:left; width:27%; margin-right:3%; padding-bottom:37px; }
.foot .block div.title { padding-bottom:5px; font-size:94%; font-weight:bold; text-transform:uppercase; line-height:1.5em; font-family:Georgia, serif !important; }
.foot .block p { font-family:Arial; }
.foot .search form { /*float:left;*/ position:relative; width:100%; }
.foot .search label { position:absolute; top:0.25em; left:5px; color:#bdbdbd; }
.foot .search input.text { /*float:left;*/ width:71%; margin-right:1px; }
.foot .search input.submit { /*float:left;*/ width:15%; }
.foot .contacts { font-family:Arial; }
.foot .contacts .phone { font-weight:bold; }
.foot .copyright { position:absolute; top:23px; right:-6%; font-family:Arial; }
.red { /*position:absolute;*/ height:6px; margin-left:5%; /*bottom:0; left:-3.4%;*/ background:#ff0000; }
.red, .red .inner { width:12.3%; height:6px; font-size:0; }
.red .left { background:url(../img/c-left-b.gif) 0 0 no-repeat; }
.red .right { background:url(../img/c-right-b.gif) 100% 0 no-repeat; }

HTML-код

<body>
<div id="holder">
<div class="head">
<div class="logo" style="background:#ec1c23 0 0 no-repeat;">
<img src="img/c-logo-left.png" width="29" height="144" class="left corner png" />
<img src="img/logo-text.png" class="text png" width="116" height="115" alt="kopo"/>
<img src="img/c-logo-right.png" width="29" height="144" class="right corner png" />
</div>
<ul class="menu blackRedLinks">
<li><a href="#"><span>O nas</span></a></li>
<li><a href="#"><span>Продукты и услуги</span></a></li>
<li><a href="#"><span>Портфолио</span></a></li>
<li><a href="#">Клиенты</a></li>
<li><a href="#"><span>Контакты</span></a></li>
</ul>
<a class="blogLink blackRed newWindow" href="#"><span>Блог</span></a>
<div class="contacts">
<span class="phone">787878 98989 77</span><br/>
<a href="#" class="noReload redPink"><span>Обратная связь</span></a>
</div>
</div>
<div class="body">
<div class="itemContent content container">
<div class="imgnews"><img src="img/k3.jpg" width="137" height="92" /></div>
<div class="clientsinfo"> <h1>Центр финансового консультирования</h1>
<div class="text">Семиотика искусства дает миракль, исчерпывающее исследование чего дал М. Кастельс в труде «Информационная эпоха». <br />
Иными словами, эротическое отражает конструктивный художественный вкус, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. <br />
По сути, элемент политического процесса просветляет базовый тип личности, отмечает автор, цитируя К. Маркса и Ф. Энгельса.</div>
</div>
<div class="notecs"><h1>Было сделанно:</h1><span class="123"><a href="">Са</a></span><span class="123"><a href="">Фирм</a></span></div>

</div>

</div>

<div class="clear" ></div>
<div class="foot">
<div class="subFoot">
<div class="vacancies block blackRedLinks">
<div class="title"><a href="#"><span>Ваи</span></a></div>
<p>На, которые способны свернуть горы.</p>
</div>
<div class="search block">
<form action="" method="post">
<label class="searchLabel" for="searchInput">поиск</label>
<input type="text" id="searchInput" class="text" name="search" value=""/>
<input type="submit" class="submit" value="OK"/>
</form>
</div>
<div class="contacts block">
<span class="phone">8989 899 898</span><br/>
Электронная почта: <a href="9898" class="blackPink"><span>89009898</span></a><br/>
joijoiohyiohoiohihoihio
</div>
<div class="copyright">© 2006-2009</div>
</div>
<span class="clear"></span>


</div>
<div class="pushRed"></div>
<div class="red">
<div class="left">
<div class="right">
<div class="inner"></div>
</div>
</div></div>
</div>
</body>

 

[nws]

Ссылка скрыта от гостей

 

[tudimon]

Ссылка скрыта от гостей

 

[Mavrun]

кроссбраузерный вариант, давно использую, ни разу не подводил

Ссылка скрыта от гостей