Как прижать footer-image ( верстка <DIV> XHTML/CSS ) ?

Artem-Samsung · Отправлено: **00:37, 04-11-2008** | #2

http://designformasters.info/posts/holy-grail/
Вот, пожалуйста. Будет полезно почитать

stalingrad432006 · Отправлено: **02:03, 04-11-2008** | #3

Artem-Samsung,
хорошая статья, но в этой "Чаше Грааля" футер не прижат.

Artem-Samsung · Отправлено: **11:35, 04-11-2008** | #4

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<Head>
  <Title>Test</Title>
  <Style>
    html, body {
      height:100%; margin:0;
    }
 
    html>body {
      min-height:100%;
      height:auto;
    }
 
    body {
      position:relative;
    }
 
    #footer {
      position:absolute;
      bottom:0; width:100%;
    }
 
    #main {
      padding-bottom:50px;
    }
 
    #header,
    #footer {
      color:white; background:green;
      height:50px;
    }
  </Style>
<Body>
<div id="header">Header</div>
  <div id="main">
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  </div>
<div id="footer">Footer</div>

dmitryst · Конфигурация компьютера

Artem-Samsung, нехорошо, что футер будет наезжать на основной контент... Если прокрутки нет, то все нормально

Artem-Samsung · Отправлено: **16:11, 04-11-2008** | #6

Цитата dmitryst:

Artem-Samsung, нехорошо, что футер будет наезжать на основной контент... Если прокрутки нет, то все нормально »

А что не так?
#main {
padding-bottom:50px;
}

не срабатывает?

stalingrad432006 · Отправлено: **16:57, 04-11-2008** | #7

Благдарю откликнувшихся. Сегодня ночью нашел на одном из сайтов ( ссылку указать не могу, т.к. уже не помню, какой именно сайт был ) :

PHP код:


<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html    PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>   
<title>Ля-Ля-Ля</title>        
<style type="text/css"> 
* {margin: 0px; padding: 0px;} html {height: 100%;} body {background: url('fon_index.gif'); min-height: 100%; position: relative;} 
* html body {height: 100%;} 
#header {background:  width: 100%; height: 100px;} 
#content {width: 100%; padding-bottom: 80px; overflow: hidden;} 
#news {width: 200px; float: left;} 
* html #news {margin-right: -3px;} 
#present {width: 200px; float: right;} 
* html #present {margin-left: -3px;} 
#main {margin: 0px 200px;} 
* html #main {height: 1%; margin: 0px 197px;} 
#footer {background:  width: 100%; height: 560px; position: absolute; bottom: 0px;} 
* html #footer {bottom: -1px;}  
</style> 
</head>                
<body> 
<div id="header"> 
</div> 
</div> 
<div id="content">     
<div id="news">
</div>     
<div id="present">
</div>     
<div id="main">
</div> 
</div> 
<div id="footer">
</div> 
</html>

В принципе, пока работает как мне нужно ( в страницу пока не вкладывал контент ). Посмотрите, пожалуйста, правильно ли написан код? Спасибо.