Floating footer

trukje · 01-03-2013, 11:49 AM

I can't seem to get my footer fixed to the bottom.
Can someone please help me?

HTML:

Code:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="script/cufon-yui.js" type="text/javascript"></script>
<script src="font/Kalinga.ttf" type="text/javascript"></script>
<script type="text/javascript">
	Cufon.replace('h1'); // Works without a selector engine
	Cufon.replace('h2'); // Works without a selector engine
	Cufon.replace('h3'); // Works without a selector engine
	Cufon.replace('.top_replace');
</script>

</head>

<body>
<div class="top"></div>
<div class="top2"></div>


<div id="container">

<img src="logo.png" id="logo">

<nav>

<ul>
	<li><a href="index.php" class="menuactive">Home</a></li>
	<li><a href="menu.php" class="menupassive">Kunstprojecten</a></li>
	<li><a href="album.php" class="menupassive">Contact</a></li>
</ul>


	<p class="wit top_replace size">home page</p>

</nav>


<section>
<header>
Test
</header>
</section>


<footer>

	<p>&copy;2013 by <a href="http://www.trukje.be" title="Websites op maat" target="_blank">www.trukje.be</a></p>

</footer>

</div><!--einde container>


<div class="bottom"></div>

<div class="bottom2"></div>

<script type="text/javascript"> Cufon.now(); </script>

</body>

CSS:

Code:

/* Algemeen */

html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
}


body {
 	background-color: #FFF;
	color:#1D1D1D;
	font-size: 16px;
	font-family: Calibri, Verdana, Geneva, sans-serif;
}

header, nav, footer, article{
	display: block;
	outline: 1px solid red;
}



nav {
	float: bottom;
	padding-left: 250px;
	height: 126px;
}

div#body {

	overflow:auto;
	padding-top: 5px;
	padding-bottom: 25px; /* Height of the foorter */
	/*outline: 1px solid red;*/
	min-height: 100%;
	height: 100%;
}



/*GRID en STRUCTUUR*/

div#container {
	min-height: 100%;
	position: relative;
	width: 960px;
	margin: 0 auto;
}


.grid3{
	float: left;
	width: 220px;
	margin: 10px;
	/*outline: 1px solid red;*/
}


.grid4{
	float: left;
	width: 300px;
	margin: 10px;
	/*outline: 1px solid red;*/
}

.grid5{
	float: left;
	width: 380px;
	margin: 10px;
	/*outline: 1px solid red;*/
}

.grid6{
	float: left;
	width: 460px;
	margin: 10px;
	/*outline: 1px solid red;*/
}

.grid7{
	float: left;
	width: 540px;
	margin: 10px;
	/*outline: 1px solid red;*/
}

.grid8{
	float: left;
	width: 620px;
	margin: 10px;
	/*outline: 1px solid red;*/
}


.grid9{
	float: left;
	width: 700px;
	margin: 10px;
	/*outline: 1px solid red;*/
}

.grid12{
	float: left;
	width: 940px;
	margin: 10px;
	/*outline: 1px solid red;*/
}


.top {
	background-color: #98C93C;
	padding: 0px;
	width: 100%;
	margin: 0px;
	left: 0px;
	top: 0px;
	right: 0px;
	position: absolute;
	z-index: 0;
	height: 5px;
}

.top2 {
	background-color: #1D1D1D;
	padding: 0px;
	width: 100%;
	margin: 0px;
	left: 0px;
	top: 6px;
	right: 0px;
	position: absolute;
	z-index: 0;
	height: 120px;
}

.bottom {
	background-color: #1D1D1D;
	padding: 0px;
	width: 100%;
	margin: 0px;
	left: 0px;
	bottom: 6px;
	right: 0px;
	position: absolute;
	z-index: -3;
	height: 35px;
}

.bottom2 {
	background-color: #98C93C;
	padding: 0px;
	width: 100%;
	margin: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	position: absolute;
	z-index: -3;
	height: 5px;
}

.placeholder{
	float: left;
	width: 640px;
	/*outline: 1px solid red;*/
}

/* FOOTER */

footer{
	color:#FFF;
	font-size: 12px;
	position: absolute;
	bottom: 5px;
	width: 100%;
	height: 25px; /* Height of the foorter */
	padding-top: 0px;
	padding-right: 5px;
	text-align: right;
	clear: both;
}



footer a {
	color: #FFF;
}

footer a:hover{
	color: #FFF;
	text-decoration: none;

}


/* layout */

header h1{
	font-size: 50px;

}


h1{
	color: #fff200;
	font-size: 24px;
	margin-bottom: 15px;
	
}

h2{
	color: #00ADEF;
	font-size: 22px;
	margin-top: 10px;
	margin-bottom: 5px;	
}

h3{
	color: #EC008C;
	font-size: 22px;
	margin-top: 10px;
	margin-bottom: 5px;	
}

p{
	margin-top: 0px;
	margin-bottom: 15px;
	line-height:18px;
}

ul{
	display: block;
	color: #fff;
	padding-left: 20px;
	margin: 0;
	list-style-type: disc;
}

li{
	line-height:18px;
}


#logo{	
	height: 180px;
	width: 181px;
	position: absolute;
	top: -2px;
	left: 10px;
	margin: 0px auto;
	z-index: +1;
}




.afblink{
	border="0";

}

.bold{
	font-weight: bolder;
}

.center{
	text-align: center;
}

.springfoto{
	height: 225px;
	width: 300px;
	border: 1px solid #F68B1A;
	margin: 0;
	padding: 0;
}


.border{
	border: 1px solid #F68B1A;
}

.ruimte{
	margin-bottom: 20px;
}

.padding{
	padding-bottom: 10px;
}

.indent {
	margin-left: 20px;
}

#fadeshow1{

	height:  285px;
	width: 380px;
	border:1px solid #F68B1A;.
	margin: 0;
	margin-bottom: 20px;
	padding: 0;
	

}

.size{
	font-size: 25px;

}

.wit{
	color: #fff;
}


.geel{
	color: #fff200;
}

.oranje{
	color: #F68B1A;
}

.groen{
	color: #80CC28;
}

.paars{
	color: #EC008C;

}





/* Navigatie */

nav ul {
	font-size: 20px;
	list-style-type: none;
	padding-bottom: 8px;
	padding-top: 20px;
	padding-left: 0px;
	padding-right: 0px;
	margin-bottom: 20px;

}

nav li {
	display: inline;
	margin-right: Opx;
	padding: 0px;
}

nav li a {
	text-decoration: none;
	padding: 4px 10px;
	padding-bottom: 5px;
}

nav li a:hover{
	color: #98C93C;
	height:17px;}


}

nav li a:hover span {
	background:url('pijl_hover.png') top center no-repeat;
}

nav li a:hover {background-position:0 0;} /*IE fix*/

.menuactive{
	color: #000;
	border: 2px solid #FFF;
	border-radius: 0 0 8px 8px;
	-webkit-border-radius: 0 0 8px 8px;
	-moz-border-radius: 0 0 8px 8px;
	background: #FFF url(pijl_huidig.png) center bottom no-repeat;
	border-bottom: 10px solid #FFF;
	border-top: 20px solid #FFF;

}

.menupassive{

color: #FFF;

}

/*Contactform */


.contact{
	margin: 0;
	padding: 5px;
	border: 1px solid #F68B1A;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;	
}

label, input, textarea, select {
	display: block;
}

label{
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 0;
	
}


input, textarea, select{
	color:#000;
	border: 1px solid #999;
	padding: 6px;
	width: 275px;
}

select{
	border: 1px solid #999;
	padding: 6px;
	width: 289px;
}

input#email:focus, textarea#bericht:focus, input#naam:focus, input#voornaam:focus, select#titel:focus{
	

border: 1px solid #F68B1A;


}
.btn{
	cursor: pointer;
	cursor: hand;
	width: 289px;
	margin-top: 10px;
	margin-bottom: 10px;
	background: #F68B1A;
	font-size: 18px;
	color: #fff;
	border: 1px solid #fff;
	
}


.fout{
	border: 1px solid #EC008C;	
}

sunfighter · 01-03-2013, 04:27 PM

Code:

<!DOCTYPE html>
<html lang="en">>
<head>
<title>Title of the document</title>
<style type="text/css">
html, body
{
	padding: 0;
	margin: 0;
	height: 100%;
}
#page
{
	min-height: 100%;  /* for all other browsers */
	height: 100%;  /* for IE */
	width: 960px;
	margin: auto;
}
#header
{
	background-color: pink;
	height: 75px;
}
#main
{
	padding-bottom: 75px;   /* This value is the height of your footer */
}
#footer
{
	background-color: green;
	position: absolute;
	width: 960px;
	bottom: 0;
	height: 75px;  /* This value is the height of your footer */
}
</style>
</head>

<body>
<div id="page">
      <div id="header">HEADER</div>
      <div id="main">A small amount of content.</div>
      <div id="footer">FOOTER</div>
</div>
</body>
</html>