footer problem

**cloak** · Sep 13, 2004 04:16

url: http://www.36-degrees.co.uk/me/34th/
css: http://www.36-degrees.co.uk/me/34th/style.css

Im trying to get the footer to sit at the foot of the document, ive tried absolute positioning, but when the page is forced to scroll, the footer dosent adjust to the new bottom of the page.

Ive read the article on ALA concerning footers, and tried to implement the javascript they have there to calculate the height of the browser window, but that failed too.

Any clue on the easiest and mostconsistent way of doing this?

**m0n5t3r** · Sep 13, 2004 08:51

You lack a

Code:

html,body{
 	height: 100%;
 }

**Paul O'B** · Sep 13, 2004 17:12

Any clue on the easiest and mostconsistent way of doing this?

You've come to the right place

There is a FAQ sticky thread that deals exactly with this problem. It explains how to achieve 100% height and keep a footer at the bortoom and works very well (even if is say so myself).

The ALA article misses the point a bit as I have been using this for over a year now with no problems. If you have a look at the 3 column demo (sticky thread)you will see sxamples of loads of them with footers all in place.

If you still can't work it out then post again and I'll do it for you

Paul

**Paul O'B** · Sep 13, 2004 17:30

Did it anyway

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* commented backslash hack v2 \*/ 
html, body{height:100%;} 
/* end hack */ 
body {
color: #777;
background: #fff url(bg.gif) repeat-y center top;
margin: 0;
padding: 0;
border: 0;
text-align: center;
font-family: verdana;
font-size: smaller;
}
#outer{
 background: transparent;
 color: #000;
 margin-left: auto;
 margin-right: auto;
 width: 768px;
 padding: 0;
 border: 0;
 min-height:100%;/*for gecko etc */
 position:relative;/*stacking context*/
}
* html #outer {height:100%}/* for ie*/
}
a { 
text-decoration: none; 
color: #444; 
}
a:hover { 
text-decoration: none;
color: #5496D0; 
}
#nav {
 float: right; 
 width: 760px;
 margin: 0;
 padding: 4px;
 background-color: #315B9B;
 line-height: 2px;
 border-bottom: 4px solid #ccc;
 }
#nav li {
 float: right;
 margin-left: 10px;
 padding: 0;
 list-style: none;
 border: 1px solid #949494;
 }
#nav .link {
 margin-left: 0px;
 list-style: none;
 text-decoration: none;
 }
#nav a {
 float: left;
 padding: 10px 10px 10px 10px;
 text-decoration: none;
 border: 0px;
 font-family: helvectica;
 font-size: 10px;
 font-weight: bold;
 color: #FFF;
 }
#nav a:hover {
 color: #315B9B;
 background-color: #fff;
 text-decoration: none;
 border-bottom: 0px;
 }
#nav a.active  {
 color: #95ed89;
 text-decoration: none;
 background-color: #fff;
 }
#left {
float: left;
width: 250px;
background-color: #fff;
padding: 2px;
}
#right {
float:right;
width: 496px;
background: #FFF;
margin: 5px 5px 5px 5px;
padding:2px;
text-align: left;
}
.title {
font-family: Arial;
font-weight:bold;
font-size: larger;
text-transform:uppercase;
color: #000066;
}
P {
background-color: #FFF;
border: 1px solid #ccc;
padding: 5px;
}
P:hover {
background-color: #fff;
border: 1px solid #315B9B;
padding: 5px;
color: #315B9B;
}
#footer {
clear: both;
width: 760px;
margin: 0;
padding: 4px 4px 0px 4px;
background: #315B9B url(bgfoot.gif) ;
border-top: 4px solid #ccc;
text-align: right;
color: #fff;
font-size: x-small;
line-height: 44px;
height: 54px;
position:absolute;
bottom:0;left:0;	
}
#clearfooter {height:62px;clear:both}/* to stop content overwriting footer*/
#footer a {
color: #fff;
}
#footer a:hover {
color: #5496D0;
}
.foot1 {
padding-lefT: 10px;
float: left;
}
.foot2 {
float: right;
padding-right: 10px;
}
</style>
<title>34th Security</title>
</head>
<body>
<div id="outer"> 
  <ul id="nav">
	<li><a href="#">FAQ</a></li>
	<li><a href="#">CONTACT</a></li>
	<li><a href="#">ABOUT US</a></li>
	<li><a href="#">SERVICES</a></li>
	<li><a href="#">HOME</a></li>
  </ul>
  <div id="left"><img alt="34th security - logo" src="logo.png" /> <img alt="presentational element" src="man.gif" /> 
  </div>
  <div id="right"> <br />
	<span class="title">Welcome</span> 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec felis magna, 
	  eleifend at, mattis eget, aliquam in, metus. Nam felis nisl, placerat eu, 
	  iaculis a, faucibus eget, magna. Vivamus vel dui aliquet turpis viverra 
	  convallis. Integer scelerisque, lectus ut dignissim posuere, eros mauris 
	  hendrerit magna, nec accumsan diam eros ut ipsum. Nam auctor tortor sit 
	  amet lectus. Praesent condimentum purus vel lorem. Vestibulum eget justo 
	  quis tellus fermentum ullamcorper. Curabitur scelerisque. Ut quis lacus. 
	  Ut ligula. Etiam suscipit pretium nisl. Curabitur ac purus ut elit fringilla 
	  feugiat. Nulla facilisi. Ut quis nunc id dui fringilla consequat. Ut placerat 
	  nulla quis elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	  Aliquam sed ligula. Fusce in neque ac dolor malesuada tincidunt. Cras orci 
	  sapien, blandit et, tincidunt fermentum, placerat consequat, tortor.</p>
	<span class="title">Clients</span> 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec felis magna, 
	  eleifend at, mattis eget, aliquam in, metus. Nam felis nisl, placerat eu, 
	  iaculis a, faucibus eget, magna. Vivamus vel dui aliquet turpis viverra 
	  convallis. Integer scelerisque, lectus ut dignissim posuere, eros mauris 
	  hendrerit magna, nec accumsan diam eros ut ipsum. Nam auctor tortor sit 
	  amet lectus. Praesent condimentum purus vel lorem. Vestibulum eget justo 
	  quis tellus fermentum ullamcorper. Curabitur scelerisque. Ut quis lacus. 
	  Ut ligula. Etiam suscipit pretium nisl. Curabitur ac purus ut elit fringilla 
	  feugiat. Nulla facilisi. Ut quis nunc id dui fringilla consequat. Ut placerat 
	  nulla quis elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	  Aliquam sed ligula. Fusce in neque ac dolor malesuada tincidunt. Cras orci 
	  sapien, blandit et, tincidunt fermentum, placerat consequat, tortor. <br />
	</p>
  </div>
  <div id="clearfooter"></div>
  <!-- this must stay above footer -->
  <div id="footer"> <span class="foot1"><a href="http://www.36-degrees.co.uk">36 
	degrees design</a></span> <span class="foot2"><a href="http://validator.w3.org/check?uri=referer">XHTML</a> 
	<a href="#">CSS</a> <a href="#">508</a></span> </div>
</div>
</body>
</html>

Paul

**cloak** · Sep 13, 2004 17:55

cheers paul - youre a legend.

User Tag List

Thread: footer problem

Thread Tools

Display

footer problem

Bookmarks

Bookmarks

Posting Permissions