PDA

View Full Version : Floating Footer to Bottom Page

david07
03-14-2007, 04:35 AM
I have very much given up. On finding a way of floating footer div to bottom of page. So many suggestions and techniques, and many dont work. I also found a few that worked but are incompatible with IE7, as they use "ie hacks" which were intended for IE5-6.
I have tried to create my own, simplified "floating footer".

Ive tested it in Ie6,Ie7,FireFox,Safari and they all seem to work fine.

Can anyone tell me if their are any probelms with the following code.

Short Content -->http://www.hypeweb.com.au/index_short.html
Long Content -->http://www.hypeweb.com.au/index_long.html

----------------------------------------
The Code (Short Ver.)
----------------------------------------
<style type="text/css">

html{
height: 100%;
}
body{
height: 100%;
margin:0px;
text-align: center;
padding: 0;
}
#container {
min-height: 100%;
background-color: blue;
margin: 0 auto;
width: 760px;
}
/* IE 5+ does not render min-height, IE 7 now does */
*html #container {
height: 100%;
background-color: red;
}
/* Make sure footer does not go over any content in container */
.clear {
height: 50px;
display: block;
clear: both;
border: 1px dotted gray;
}
#footer{
position: relative;
background-color: yellow;
height: 50px;
overflow: hidden;
margin: -50px auto 0 auto;
width: 760px;
}
</style>

</head>

<body>

<div id="container">
<div>The Container Div</div>
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><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 class="clear">The Clearer Div (Prevent footer over riding content &/or clear any previous floating divs in container, use with long content)</div>
</div>

<div id="footer">
This is the Footer Div, which is a set height<br>
Excess info in the Footer Div gets hidden<br>
Excess info in the Footer Div gets hidden<br>
</div>

</body>
</html>
_Aerospace_Eng_
03-14-2007, 05:01 AM
As for any problems. Well the negative margin on the footer could cause some links to not work.

This is how I would have done it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
height:100%;
text-align:center;
margin:0;
padding:0;
border:0;
}

#container {
min-height:100%;
background-color:blue;
width:760px;
position:relative;
text-align:left;
margin:0 auto;
}

#header {
background:#F00;
height:100px;
}

#content {
padding-bottom:50px;
}

#footer {
position:absolute;
background-color:#FF0;
height:50px;
overflow:hidden;
width:760px;
bottom:0;
left:0;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#container {
height:100%;
}
#footer {
bottom:-1px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">Header Div</div>
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<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"> This is the Footer Div, which is a set height<br>
Excess info in the Footer Div gets hidden<br>
Excess info in the Footer Div gets hidden<br>
</div>
</div>
</body>
</html>
david07
03-14-2007, 05:34 AM
am i missing something? How is the stylesheet going to know, if it is Ie7. if the code is in comments??
_Aerospace_Eng_
03-14-2007, 06:26 AM
Yeah you are missing something. I used conditional comments (http://www.quirksmode.org/css/condcom.html). Special html comments that only IE browsers understand.