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

Code:

div#footer {
     position: fixed;
     bottom: 0;
}

HTML Code:

<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?

HTML Code:

<!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>

Thread: Liquid Footer

Thread Tools

Search Thread

Liquid Footer

Bookmarks

Bookmarks

Posting Permissions