PDA

View Full Version : footer wont stick to the bottom



kimikai
06-03-2012, 07:35 PM
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
06-03-2012, 11:32 PM
Please post the url of the page you are having trouble with.

kimikai
06-04-2012, 05:50 AM
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
06-04-2012, 05:57 AM
please post all of the code as your page has it then-All of it

kimikai
06-04-2012, 07:46 AM
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
06-04-2012, 07:59 AM
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
06-04-2012, 08:05 AM
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
06-09-2012, 05:05 AM
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
06-09-2012, 07:03 AM
I am not quite clear what you are trying to say.

It may be a trial by error with adding content.

bernie1227
06-09-2012, 10:51 AM
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

kimikai
06-09-2012, 02:25 PM
ye i got it done myself

tho...as we are speaking of placing stuff anyways, and the full code is here already.

i have that wrapper_content, right, its 80% of the width of your screen all the time.
wrapper_menu will always have a 180px width inside wrapper_content. So that wont be fluid.
Next theres space left in width for the content div, which will change according to the width of your screen.
The problem is, i dont think i can really set like an 80% command to it, cuz it will take 80% of wrapper_content, and when the space of wrapper_content - the 180px isnt enough for 80% of wrapper_content, it will place it underneith.

So.. basically how do i set a fluid with to the content div, so it will always fill up the place thats free, say with a 20px margin right and 20px margin away from wrapper_menu on the left....

bernie1227
06-13-2012, 09:50 AM
So you mean like, two divs, one 180px, and one fluid, side by side within a div, and you want a gap between them? Is that what your asking?

kimikai
06-13-2012, 01:11 PM
yep both questions got fixed tho, the footer to the bottom and the fluid-fixed div combination :)