Log in

View Full Version : Liquid Footer


NADB
10-01-2007, 06:18 PM
I am having a problem with the following code. I would like to make the footer stay at the bottom of my webpage as content is being added to it. How do I go about doing this?

#footerPan{width:778px; height:231px; position:relative; margin:0 auto; padding:0;}
#footernextPan{width:506px; height:150px; position:absolute; top:0px; right:10px; background:#B0AD93; color:#fff; margin:0;}
#footerPan ul{width:380px; display:block; position:absolute; right:40px; top:33px; }
#footerPan li{float:left; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPan ul li a{padding:0 10px; color:#FFFFFA; background:#B0AD93; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan ul li a.padl{padding:0 0 0 14px;}

Any help is appreciated.

NADB
boogyman
10-01-2007, 06:22 PM
div#footer {
position: fixed;
bottom: 0;
}




<div id="footer">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
Tawni
10-06-2007, 06:40 AM
#footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px dotted #AAAAAA;
background-color: #CCCCCC;
color: #626262;
font-size: 70%;
}
#footer p {
margin: 0.5em 0 1em 2em;
padding: 0;
}
mee
10-08-2007, 12:56 PM
Hi

I gote the same problem. But I couldn't solve it. When I resize the browser window, than the footer is moving over the content layer ...:(
What can I do, that this is not happening?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Dokumenttitel</title>
<style type="text/css">
#content {
position: absolute;
width: 200px;
float: left;
border: 1px solid #000;
}

#footer {
position: absolute;
float: left;
width: 200px;
bottom: 50px;
left: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="content">Content1</div>
<div id="footer">Footer</div>
</body>
</html>