Pushing down that footer

**LeeCHeSSS** · Apr 19, 2004 12:23

There's a few (understatement - I know) CSS experts here, so I wonder if any of them can tell me how I could position the footer at http://www.writers-summit.com/ at the bottom of the window (or below if the content is larger).

If it involves rewriting my entire layout, then I'll pass

**doctornick** · Apr 19, 2004 13:00

I know of two ways of doing this. The first is discussed in Kevin Yank's article at

http://www.sitepoint.com/article/exp...its-css-layout

which uses javascript (don't worry - you just download the script from Cross-Browser.com) to equalise all the column heights so the footer is always below the content of the page.

The second is to simulate equal column heights using floats. For this method, you float any side columns to left or right and then wrap them and the central column in another div. Then below this you include a 'clear' div which means that any content you include after that will automatically appear below the other columns.

e.g for a layout similar to yours with a left and centre column, the html and styles would appear as

#left {
float: left;
width: 200px;
}

#center {
margin-left: 200px
}

#clear {
clear: both;
}

<div id="wrapper">
<div id="left">

</div>
<div id="center">

</div>
</div>
<div id="clear"></div>
<div id="footer">

</div>

The only problem with the latter method is that the side columns must come before the central column in the html. This would have a negative impact on your search engine rank and also confuse the hell out of anyone
using aural browsers.

**Paul O'B** · Apr 19, 2004 13:04

Hi,

Try this out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>The Writers' Summit</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<style type="text/css">
/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */ 
BODY {
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  background: #FFFFFF;
  color: #000000;
  margin: 0;
  padding: 0;
}
FORM, FIELDSET {
  display: inline;
}
FIELDSET {
  margin: 0;
  padding: 1px 3px 0;
  border: 0;
}
  FIELDSET LEGEND {
	font-size: 7pt;
	font-weight: bold;
  }
INPUT, SELECT {
  font: 10pt 'Trebuchet MS', Verdana, sans-serif;
}
IMG {
  border: 0;
}
#header {
  height: 75px;
  margin-bottom: 5px;
  background: #DDDDDD url(http://www.writers-summit.com/images/header2.png) no-repeat;
}
  #header H1 {
	margin: 0;
	padding: 25px 0 0 75px;
	font-size: 15pt;
  }
  #header #slogan {
	position: relative;
	top: -10px;
	left: 171px;
	font-size: 10pt;
  }
#page {
  background: url(http://www.writers-summit.com/images...ader_right.png) no-repeat 305px 0;
}  
  A:link, A:visited {
	font-weight: bold;
	color: #31A229 /*6BA229*/;
	text-decoration: none;
  }
  A:hover, A:active {
	text-decoration: underline;
  }
  H2 {
	font-size: 13pt;
  }
  H2.alt1 {
	background: #31A229 /*6BA229*/;
	color: #FFFFFF;
  }
  H2.alt2 {
	background: #5B4DD6 /*D64D84*/;
	color: #FFFFFF;
  }
  H2.alt3 {
	background: #7FD373 /*ADD373*/;
	color: #FFFFFF;
  }
  H2.alt4 {
	background: #948EE7 /*E78EB5*/;
	color: #FFFFFF;
  }
  P, H3 {
	font-size: 10pt;
  }
  .block {
	margin-bottom: 5px;
  }
  HR {
	margin-left: 5px;
	margin-right: 10px;
	border: 0;
	background: #DDDDDD;
	color: #DDDDDD;
	height: 1px;
  }
  #navigation {
	float: left;
	width: 300px;
	margin: 0 5px 0 0;
  }
	#navigation #subheader_left {
	  background: url(http://www.writers-summit.com/images...ader_left1.png) no-repeat;
	  height: 100px;
	  margin: 0 0 5px;
	}
	#navigation .block.alt {
	  background: #FFFFFF url(http://www.writers-summit.com/images/block_alt.png) repeat-y;
	}
	#navigation UL {
	  padding: 0 0 0 20px;
	  margin: 0 5px 0 0;
	  color: #31A229;
	  list-style: square /*url(http://www.writers-summit.com/images/bullet.png)*/;
	}
	#navigation LI A {
	  background: inherit;
	  color: #5B4DD6 /*D64D84*/;
	}
	#navigation IMG.avatar {
	  float: left;
	  width: 75px;
	  height: 100px;
	  margin: 0 5px;
	}
	#navigation DIV.item {
	  width: 250px;
	  margin: 0 0 5px 50px;
	  padding: 0;
	}
	#navigation H2 {
	  width: 244px;
	  margin: 0 0 5px 50px;
	  padding: 0 3px;
	}
	#navigation P, #navigation H3 {
	  margin: 0;
	  padding: 0;
	}
  #content {
	float: left;
	margin-top: 10px;
	width: 60%;
	background: #FFFFFF;
	color: inherit;
  }
	#searchbox {
	  height: 45px;
	  margin: 0 5px 5px 0;
	  background: #7FD373 /*ADD373*/;
	  color: #FFFFFF;
	}
	#quicklinks {
	  height: 40px;
	  margin: 0 5px 5px 0;
	  background: #DDDDDD;
	  color: inherit;
	}
	  #quicklinks UL, #quicklinks LI {
		height: 17px;
		padding: 0;
	  }
	  #quicklinks UL {
		margin: 0;
		list-style: none;
	  }
		#quicklinks LI {
		  display: inline;
		  margin: 0 10px 0 5px;
		  font-size: 10pt;
		}
		  #quicklinks #submissions A, #quicklinks #community A {
			font-size: 8pt;
		  }
	#content H2, #content P, #content H3 {
	  margin: 0 5px 5px 0;
	  padding: 0 3px;
	}
	#content IMG.avatar {
	  float: left;
	  width: 75px;
	  height: 100px;
	  margin: 0 5px;
	}
  .fillherup {
	clear: both;
	height: 1px;
	line-height: 1px;
	font-size: 1px;
  }
#footer {
  position: relative;
  margin-top: 5px;
  clear:both; 
}
  #footer .line {
	background: #999999;
	color: inherit;
	height: 5px;
	font-size: 1px;
	line-height: 1px;
	margin-bottom: 5px;
  }
  #footer .misc_links {
	position: relative;
	background: #DDDDDD url(http://www.writers-summit.com/images/header2.png) no-repeat;
	color: inherit;
	height: 25px;
  }
	#footer .misc_links DIV {
	  position: absolute;
	  top: 1px;
	  width: 75px;
	  background: transparent;
	  color: #FFFFFF;
	  font-size: 7pt;
	  line-height: 8pt;
	}
  #footer A {
	background: transparent;
	color: #FFFFFF;
  }
#wrapper {
 height:100%;
 min-height:100%;
 margin-bottom:-40px
}
html>body #wrapper {height:auto}
#clearfooter {height:40px}
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
#minHeight{float:left;width:0px;height:100%;margin-bottom:-40px;} /*safari wrapper*/

</style>
</head>
<body>
<div id="minHeight"></div> 
<div id="wrapper">
<div id="header"> 
  <h1>The Writers' Summit</h1>
  <span id="slogan">a creative outlet</span> </div>
<div id="page"> 
  <div id="navigation"> 
	<div id="subheader_left"> </div>
	<div class="block"> 
	  <form action="/backend/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password)">
		<h2 class="alt4">please login</h2>
		<div class="item" style="background: #EEEEEE; color: inherit;"> 
		  <p style="margin: 0 3px;">You have to <a href="/backend/register.php?amp;">register</a> 
			before you can use all features of this site.</p>
		  <script type="text/javascript" src="http://www.writers-summit.com/backend/clientscript/vbulletin_md5.js"></script>
		  <input type="hidden" name="vb_login_md5password" value="" />
		  <input type="hidden" name="s" value="49940285b868538689d9ea3c68154465" />
		  <input type="hidden" name="do" value="login" />
		  <input type="hidden" name="forceredirect" value="1" />
		  <input type="hidden" name="cookieuser" value="1" />
		  <fieldset>
		  <legend>username</legend>
		  <input type="text" name="vb_login_username" size="12" />
		  </fieldset>
		  <fieldset>
		  <legend>password</legend>
		  <input type="password" name="vb_login_password" size="12" />
		  </fieldset>
		  <input src="http://www.writers-summit.com/images/login.png" type="image" alt="login" />
		</div>
	  </form>
	</div>
	<div class="block alt"> 
	  <h2 class="alt1">site news</h2>
	  <div class="item notaltyoustupidIE"> 
		<ul>
		  <li>
			<h3><a href="#">Proin sit amet quam ac urna molestie lobortis. Cras 
			  sit.</a></h3>
		  </li>
		  <li>
			<h3><a href="#">Vestibulum in lacus. Maecenas vel augue. Ut vitae 
			  orci in.</a></h3>
		  </li>
		  <li>
			<h3><a href="#">Maecenas aliquet, enim sed mattis rhoncus, arcu purus 
			  pellentesque pede.</a></h3>
		  </li>
		</ul>
	  </div>
	</div>
	<div class="block"> 
	  <h2 class="alt3">featured author</h2>
	  <div class="item"> <img src="http://www.writers-summit.com/images/tmp.png" class="avatar" alt="" title="" /> 
		<h3><a href="#">Nunc pede</a></h3>
		<p style="margin: 5px 5px 0 85px;">Nunc pede in hac habitasse latea dictumst. 
		  Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
		  per inceptos hymenaeos. Curabitur consequat pretium wisi. Nam lacinia 
		  pulvinar.</p>
		<div class="fillherup">&nbsp;</div>
	  </div>
	</div>
  </div>
  <div id="content"> 
	<form method="post" action="#">
	  <div id="searchbox"> 
		<fieldset>
		<legend>enter keywords</legend>
		<input type="text" />
		</fieldset>
		<fieldset>
		<legend>search by</legend>
		<select>
		  <option>author</option>
		  <option>title</option>
		  <option>topic</option>
		</select>
		</fieldset>
		<fieldset>
		<legend>in category</legend>
		<select>
		  <option>science fiction</option>
		  <option>fantasy</option>
		  <option>etcetera.</option>
		</select>
		</fieldset>
		<input type="image" src="http://www.writers-summit.com/images/search.png" alt="perform search" title="perform search" />
	  </div>
	</form>
	<div id="quicklinks"> 
	  <script type="text/javascript">
		<!--
		function switchSublinks(number) {
		  sublinks = new Array();
		  sublinks[1] = 'submissions';
		  sublinks[2] = 'community';
		  for (i = 1; i < 3; i++) {
			document.getElementById(sublinks[i]).style.display = ((number == i) ? '' : 'none');
		  }
		}
		-->
		</script>
	  <ul>
		<li><a href="#" onmouseover="switchSublinks(1);">submissions</a></li>
		<li><a href="backend/index.php" onmouseover="switchSublinks(2);">community</a></li>
		<li><a href="index.php" onmouseover="switchSublinks(0);">home</a></li>
	  </ul>
	  <ul id="submissions" style="display: none;">
		<li><a href="submissions.php?amp;do=legal">legal 
		  agreement &amp; disclaimer</a></li>
		<li><a href="#">submit your story</a></li>
		<li><a href="#">browse by category</a></li>
	  </ul>
	  <ul id="community" style="display: none;">
		<li><a href="#">view today's posts</a></li>
		<li><a href="#">private messages</a></li>
		<li><a href="#">log out</a></li>
	  </ul>
	</div>
	<div class="block"> 
	  <h2 class="alt1">featured stories</h2>
	  <div> <img src="http://www.writers-summit.com/images/tmp.png" class="avatar" alt="" title="" /> 
		<h3><a href="#">Sed mauris. Ut leo justo, accumsan id turpis duis.</a><br />
		  By: <a href="#">Aliquam justo</a></h3>
		<p style="margin-left: 83px; margin-right: 5px;">Aliquam dolor. Pellentesque 
		  turpis pede, semper quis, laoreet in, pulvinar non, ipsum. Proin convallis. 
		  Donec arcu wisi, rhoncus sed, aliquet eu, faucibus ac, pede. Cum sociis 
		  natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
		  mus. Aliquam et metus luctus dui porttitor euismod. Nam dui. Cras eget 
		  nibh quis quam.</p>
		<div class="fillherup">&nbsp;</div>
	  </div>
	  <hr />
	  <div> <img src="http://www.writers-summit.com/images/tmp.png" class="avatar" alt="" title="" /> 
		<h3><a href="#">In sodales turpis ut tortor. Fusce eget sem metus.</a><br />
		  By: <a href="#">Mauris vitae</a></h3>
		<p style="margin-left: 83px; margin-right: 5px;">Morbi rutrum. Integer 
		  cursus mauris id dolor. Sed a risus nec erat feugiat dapibus. Vivamus 
		  mollis. Phasellus tempus ligula eleifend nunc. Ut volutpat pharetra 
		  ante. Etiam ut lectus in arcu dapibus varius. Nulla leo est, hendrerit 
		  a, ullamcorper vitae, rhoncus eu, justo. Phasellus lorem turpis, gravida 
		  sit amet, aliquam quis.</p>
		<div class="fillherup">&nbsp;</div>
	  </div>
	</div>
	<div class="block"> 
	  <h2 class="alt2">new submissions</h2>
	  <p>Lorem ipsum<br />
		Lorem ipsum<br />
		Lorem ipsum</p>
	</div>
  </div>
  <div class="fillherup">&nbsp;</div>
<div id="clearfooter"></div>
</div>
</div><!-- end wrapper -->
<div id="footer"> 
  <div class="line">&nbsp;</div>
  <div class="misc_links"> 
	<div style="margin-left: 340px;"><a href="http://validator.w3.org/check/referer">XHTML</a> 
	  &amp; <a
href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> valid</div>
	<div style="margin-left: 420px;">Copyright 2004 Danny Bessems</div>
  </div>
</div>
</body>
</html>

Should work in most major browsers (not ie mac).

Paul

**Paul O'B** · Apr 20, 2004 04:11

Hi Doctornick,

The only problem with the latter method is that the side columns must come before the central column in the html.

There is a way to float the central column first and is used in my layout here:

http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

Basically any column in a three column layout can come first in the html with this technique.

The secret is to wrap the centre content column and the left column in a wrapper float which is floated left. The wrapper float leaves enogh room for another column to float to the right outside of the wrapper.

Therefore you can float the centre column right in the wrapper float first and the left content floated second. The third column can be floated outside the wrapper which is itself floated so all columns line up at the top of the screen.

It sounds more complicated than it is but if you look at the link above you can see that is works quite well.

Paul

**LeeCHeSSS** · Apr 20, 2004 04:19

Paul, could you do me a small favor and make the chances you made bold? That way I can more easily see them

**Paul O'B** · Apr 20, 2004 04:34

Ok! There were'nt very may changes I basically used a wrapper to set the 100% and a negative bottom margin to allow the footer to fall into place. The space allowed in the negative bottom margin of the wrapper should be the height of the footer, so try to keep the foooter to the same height.

If you change the height of the footer the change the negative margin accordingly. There is alo an empty div called clearfooter which gose at the end of the content to stop the content disappearing behind the footer. Again this clearfooter is the same size as the footer and needs to be adjusted if you change the sie of the footer. It's quite a simple technique and works in 90% of browsers (but not ie mac and a couple of other minor browsers) but should not have any adverse effects either way.

I think the parts in bold are the only changes I made

Code:

/* commented backslash hack \*/ html, body{height:100%;} /* end hack */ 
#footer { position: relative; margin-top: 5px; clear:both; }
 
#wrapper { height:100%; min-height:100%; margin-bottom:-40px}
html>body #wrapper {height:auto}#clearfooter {height:40px}
* > html #clearfooter {float:left;width:100%;}/* ie mac styles 
*/
#minHeight{float:left;width:0px;height:100%;margin-bottom:-40px;} /*safari wrapper*/
 
<body>
<div id="minHeight"></div> 
<div id="wrapper">
<div id="header">  
etc....
......
......
 
<div class="fillherup">&nbsp;</div>
<div id="clearfooter"></div>
</div>
</div><!-- end wrapper --><div id="footer"> 
 
<div class="line">&nbsp;</div> <div class="misc_links"> 	
<div style="margin-left: 340px;"><a href="http://validator.w3.org/check/referer">XHTML</a> 	 &amp; <ahref="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> valid</div>	
<div style="margin-left: 420px;">Copyright 2004 Danny Bessems</div> </div>
</div>
</body>
</html>

Hope that helps.

Paul

**LeeCHeSSS** · Apr 20, 2004 04:39

SitePoint really needs to upgrade to vB3.0.1

Also, I really only need to support the latest IE and Mozilla versions, so can I remove some of them CSS hacks (the rest of my CSS is hack-free too

) ?

**Paul O'B** · Apr 20, 2004 04:47

I've re-edited the post so I hope it makes more sense.

There aren't really any hacks just browser differences, it's all valid code

**LeeCHeSSS** · Apr 20, 2004 05:56

Thanks a lot, I'll be applying it soon!

**doctornick** · Apr 20, 2004 11:04

Cheers Paul

Makes perfect sense. Like so many other things it sounds so simple after someone explains it.

**goatlip** · Apr 20, 2004 20:47

I just have to say.

WOW PAUL. That is a beautiful example. very cool. Thanks

User Tag List

Thread: Pushing down that footer

Thread Tools

Display

Pushing down that footer

Bookmarks

Bookmarks

Posting Permissions