another footer problem again - HTML Forums

misheck · 10-28-2009, 06:26 PM

I am trying to keep my footer at the bottom of my page irregarless of whether there is text inside the body or not but I have been to almost every site there is on google but I still cannot get the footer at the bottom.

The closest I get is to get it working on firefox but not IE or vice-versa

here is the css

Code:

/** BASIC */

body {
	text-align: justify;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #333333;
}

h1, h2, h3 {
	text-transform: lowercase;
	color: #000099;
}

ul {
	margin-left: 0px;
	padding-left: 1em;
	list-style-position: inside;
}

a {
	color: #000099;
}

a:hover {
	text-decoration: none;
	color: #699;
}

/** HEADER */

#header {
	width: 700px;
	height: 60px;
	margin: 0px auto;
}

#header h1 {
	float: left;
	margin: 0px;
	padding: 20px 0px 0px 0px;
}

#header h2 {
	float: right;
	margin: 0px;
	padding: 27px 0px 0px 0px;
}

/** MENU */

#menu {
	width: 700px;
	height: 1.5em;
	margin: 0px auto;
	border: 1px solid #000099;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	padding: 3px 10px;
	border-right: 1px solid #000099;
	text-decoration: none;
}

#menu a:hover {
	background: #000099;
	color: #FFFFFF;
}

/** CONTENT */

#content {
	width: 700px;
	margin: 0px auto;
	/* modified */
	min-height: 100%;
}

#content h2 {
	font-weight: normal;
}

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

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

/** FOOTER */

#footer {
	clear: both;
	width: 680px;
	margin: 0px auto;
	padding: 5px 10px;
	border: 1px solid #000099;
	/* modified 
	position: relative;*/
}

#footer p {
	margin: 0px;
	padding: 0px;
	font-size: x-small;
}

here is a demo page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Simplicity  by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
	<h1>Shout-Africa</h1>
	<h2>The African Entertainment Hub</h2>
</div>
<div id="menu">
	<ul>
		<li><a href="#">News</a></li>
		<li><a href="#">Politics</a></li>
		<li><a href="#">Sports</a></li>
		<li><a href="#">Entertainment</a></li>
		<li><a href="#">Music</a></li>
		<li><a href="#">Videos</a></li>
		<li><a href="#">Gallery</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</div>
<div id="content">
	<div id="left">
		<h2>Welcome to Shout-africa.com!</h2>
		<p><strong>Shout-Africa</strong> is a community website built with the intention of providing entertainment, news and a discussion forum for 					  Everyone with the focus being mainly on Africa. Africa has always been misrepresented in many ways and I do hope that my site is not going to 					follow the 
				same pattern that other sites have.</p>
		<p>We are investing time and skills so we can bring you a site thats easy and freindly to use so please visit us more often so you can see the difference and the progress that we are making everyday.</p><p><strong>Shout-Africa</strong> is a community website built with the intention of providing entertainment, news and a discussion forum for everyone with the focus being mainly on Africa. Africa has always been misrepresented in many ways and I do hope that my site is not going to follow the same pattern that other sites have.</p>
		<ul>
			<li><a href="#">Php webdevelopers wanted</a></li>
			<li><a href="#">Database Administrators wanted (MySQL prefered)</a></li>
			<li><a href="#">Graphics designers wanted</a></li>
			<li><a href="#">Journalist wanted</a></li>
			<li><a href="#">Of course we need your stories</a></li>
		</ul>
		<p>All the positions are for development purposes initially and might become permanent and paid for positions. I shall aim to respond to all applications for the roles soon. Also the links are not yet activated because we are still working on sorting out the application procedure so that its easy for the both of us. </p>
	</div>
	<div id="right">
		<h2>Recent Updates</h2>
		<p><strong>[26/20/2009]</strong> Zimbabwe Unity gorvernment, how far can they go pretending all is fine?<a href="#">More…</a></p>
		<p><strong>[26/20/2009]</strong> Is South Africa ready to host the World Cup, and is their football team strong enough to give Africa their first trophy? <a href="#">More…</a></p>
		<p><strong>[26/20/2009]</strong>Drought reaped through Southern Africa whilst the Western World suffers from the worst finacial crisis it has ever known. So who is there to help us out? <a href="#">More…</a></p>
		<ul>
			<li><a href="#">Barclays premiership</a></li>
			<li><a href="#">IT in Africa</a></li>
			<li><a href="#">Swahili for all Southern Africa</a></li>
			<li><a href="#">Broadband intiative for Africa</a></li>
		</ul>
		<p><strong>[26/10/2009]</strong> Zimbabwe Unity gorvernment, how far can they go pretending all is fine?<a href="#">More…</a></p>
		<p><strong>[26/10/2009]</strong> Is South Africa ready to host the World Cup, and is their football team strong enough to give Africa their first trophy? <a href="#">More…</a></p>
		<p><strong>[26/10/2009]</strong>Drought reaped through Southern Africa whilst the Western World suffers from the worst finacial crisis it has ever known. So who is there to help us out? <a href="#">More…</a></p>
		<h2>Other news today</h2>
		<ul>
			<li><a href="#">Barclays premiership</a></li>
			<li><a href="#">IT in Africa</a></li>
			<li><a href="#">Swahili for all Southern Africa</a></li>
			<li><a href="#">Broadband intiative for Africa</a></li>
		</ul>
	</div>
</div>
<div id="footer">
	<p>Copyright &copy; 2009 www.Shout-africa.com. Designed by <a href="http://www.freecsstemplates.org" class="link1">Free CSS Templates.</a> Inspired by Misheck 
</p>
</div>
</body>
</html>