footer wont stick to the bottom

[kimikai]

So... im having huge trouble sticking my footer to the bottom, i dont know why cuz normally it works hehe...

well this is the HTML:

<div id="wrapper_header">
<div id="header">
<div id="wrapper_headergradl">
<div id="wrapper_headergradr">
	<h1>&nbsp;</h1>
</div>
</div>
</div>
</div>

<div id="wrapper_content">
<div id="wrapper_menu">
	<div id="menu">
</div><!--menu-->
</div>
<div id="content">
</div>
</div>

<div id="wrapper_footer">
<div id="footer">
Design door Daisy Nabben | Alle rechten voorbehouden <i>Himalaya Hills 2012</i>
</div>
</div>

And this is the CSS for the wrapper footer and footer:

/* Footer style */ 
#wrapper-footer {
	margin-top: 1em;
	text-align: center;
	position:absolute;
	bottom:0px;
}

#footer {
	margin: 0 20px;
	text-align:center;
	background-color: #e5f0fc;
	border: 1px solid #ccc;
	border-bottom: 0;
	clear: both;
}

Also one other question, since the header part is a fixed height, and the footer will be standard at the bottom aswell,, does that mean the rest of the space will be automatically filled with the wrapper_content div??

[ajfmrf]

Please post the url of the page you are having trouble with.

[kimikai]

I dont have a url of the page im working on, its not online yet, thats why i posted the html, tho for an edit, i did set

html, body {
height:100%;
}

just in case some1 is saying thats the mistake i made.

Also the whole website isnt much more than the coding i just posted,, just the basic setup of the divs, with a header img put in <div id="header">.

Thats all

[ajfmrf]

please post all of the code as your page has it then-All of it

[kimikai]

This is the full html coding:

<div id="wrapper_header">
<div id="header">
<div id="wrapper_headergradl">
<div id="wrapper_headergradr">
	<h1>&nbsp;</h1>
</div>
</div>
</div>
</div>

<div id="wrapper_content">
<div id="wrapper_menu">
	<div id="menu">
</div><!--menu-->
</div>
<div id="content">
</div>
</div>

<div id="wrapper_footer">
<div id="footer">
Design door Daisy Nabben | Alle rechten voorbehouden Himalaya Hills 2012
</div>
</div>

and this is the full css:

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

html {
	overflow:hidden;
}

/* Page width */
#header, #wrapper_content, #wrapper_footer {
	width: 80%;
	margin: 0 auto;
}

/* Banner style */
#wrapper_header {
	background:transparent url('images/bg.png') top center repeat-x;
}

#header {
	background:#fff url('images/bannerfluid.jpg') top center no-repeat;
}

#wrapper_headergradl {
	background: transparent url('images/bg02-blue-left.png') top left no-repeat;
}

#wrapper_headergradr {
	background: transparent url('images/bg02-blue-right.png') top right no-repeat;
}

#header h1 {
	margin:0px;
	height: 192px;
}



/* Footer style */ 
#wrapper-footer {
	margin-top: 1em;
	text-align: center;
	position:fixed;
	bottom:0px;
}

#footer {
	margin: 0 20px;
	text-align:center;
	background-color: #e5f0fc;
	border: 1px solid #ccc;
	border-bottom: 0;
	clear: both;
}

[ajfmrf]

Well, I don't have the images that you have in the code posted but without them the text I put one the page pushed the footer down.

If you can put the full url of the images in the code maybe I can see what you do.Without them I can not do anything else.

[kimikai]

so basically what ur saying is when i put stuff in the content it will push it down eventually??

Tho... the thing im havin is that i dont know how to give a certain percentage to the wrapper_content part. I need it to fill up the whole space between the header and the footer =/ ill try to upload the pictures and then put the code again

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

html {
	overflow:hidden;
}

/* Page width */
#header, #wrapper_content, #wrapper_footer {
	width: 80%;
	margin: 0 auto;
}

/* Banner style */
#wrapper_header {
	background:transparent url('http://img18.imageshack.us/img18/1290/50075148.png') top center repeat-x;
}

#header {
	background:#fff url('http://img861.imageshack.us/img861/4318/bannerfluid.png') top center no-repeat;
}

#wrapper_headergradl {
	background: transparent url('http://img11.imageshack.us/img11/6904/bg02blueleft.png') top left no-repeat;
}

#wrapper_headergradr {
	background: transparent url('http://img407.imageshack.us/img407/1736/bg02blueright.png') top right no-repeat;
}

#header h1 {
	margin:0px;
	height: 192px;
}



/* Footer style */ 
#wrapper-footer {
	margin-top: 1em;
	text-align: center;
	position:fixed;
	bottom:0px;
}

#footer {
	margin: 0 20px;
	text-align:center;
	background-color: #e5f0fc;
	border: 1px solid #ccc;
	border-bottom: 0;
	clear: both;
}

[bernie1227]

quick question, are you trying to make the footer stick to the bottom o the page so it stays in the same place as you scroll up and down the page? like the facebook chat bar?

[ajfmrf]

I am not quite clear what you are trying to say.

It may be a trial by error with adding content.

[bernie1227]

I mean that like the facebook chat bar, it stays in the same place on the screen wherever you are on the page, so it is always on the screen, in the same place. That's what

position: fixed;

does