Hi,
I have made my footer text and images so when the content is less than the page it still remains at the bottom. That is great and everything however.... When the content is more than the page the footer remains where it is and does not go to the bottom of the content, just the browser window.
I need the footer text and images to remain at the bottom in all situations, a lot of my friends have struggled trying to do this, but none have found a fix without using JS.
My website: <!-- m --><a class="postlink" href="http://mark.delvar.org">http://mark.delvar.org</a><!-- m -->
Please help?
Thanks!Something like this perhaps.I can't really comprehend the css in that txt file however I have discovered a very interesting forum thread that seems to have a working solution:
-------------
Yes it's possible,
min-height would be the easiest way, IE does not support min-height, but it treats height the same way as other browsers treat min-height, in other words it will stretch the height restriction rather than overflow it.
you can use IE workarounds keep everybody happy if you want..
Lance posted a nice neat solution for a sticky footer
I amended it slightly to use an <hr> instead of a padding div.. (In a text browser it would still make "semantic sense" to have the footer seperated from the content with an <hr> ). This technique should be able to be used in just about any layout as the container can wrap the whole layout and footer can be sized/left positioned to suit which "column" you want it to appear beneath ..
<style type="text/css" media="screen">
html, body {
margin: 0; padding: 0; height: 100%;
background: #eee;
}
#container {
height: 100%;
margin: 0px 100px;
position: relative;
background: #fff;
}
html>body #container {height: auto; min-height: 100%;}
#footer {
position: absolute;
bottom: 0px;
background: #ffc;
width: 100%;
height: 40px;
}
hr {
height: 40px; /* enough to "pad" bottom of div so footer text is not covered with content text */
visibility: hidden;
}
</style>
</head>
<body>
<div id="container">
<p>Filler</p>
<hr />
<div id="footer">footer</div>
</div>
<!-- m --><a class="postlink" href="Suzyhttp://mark.delvar.org/Untitled-2.htm">Suzyhttp://mark.delvar.org/Untitled-2.htm</a><!-- m -->
Well that is it working in action, but the code is utterly confusing so I can't use that.Originally posted by w1ckedsick!
<!-- m --><a class="postlink" href="http://mark.delvar.org/Untitled-2.htm">http://mark.delvar.org/Untitled-2.htm</a><!-- m -->
Well that is it working in action, but the code is utterly confusing so I can't use that.
that is not totally working: if you add more content in the container and expand the page beyond the screen through amount of text, for example, the footer div is falling off the screen.
try putting this in your body, and you will see what I'm saying:
<div id="container">
<p>Filler</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<hr />
<div id="footer">footer</div>
</div>If you've got the code working doing what you want it to do, do you really need to understand it?
I have made my footer text and images so when the content is less than the page it still remains at the bottom. That is great and everything however.... When the content is more than the page the footer remains where it is and does not go to the bottom of the content, just the browser window.
I need the footer text and images to remain at the bottom in all situations, a lot of my friends have struggled trying to do this, but none have found a fix without using JS.
My website: <!-- m --><a class="postlink" href="http://mark.delvar.org">http://mark.delvar.org</a><!-- m -->
Please help?
Thanks!Something like this perhaps.I can't really comprehend the css in that txt file however I have discovered a very interesting forum thread that seems to have a working solution:
-------------
Yes it's possible,
min-height would be the easiest way, IE does not support min-height, but it treats height the same way as other browsers treat min-height, in other words it will stretch the height restriction rather than overflow it.
you can use IE workarounds keep everybody happy if you want..
Lance posted a nice neat solution for a sticky footer
I amended it slightly to use an <hr> instead of a padding div.. (In a text browser it would still make "semantic sense" to have the footer seperated from the content with an <hr> ). This technique should be able to be used in just about any layout as the container can wrap the whole layout and footer can be sized/left positioned to suit which "column" you want it to appear beneath ..
<style type="text/css" media="screen">
html, body {
margin: 0; padding: 0; height: 100%;
background: #eee;
}
#container {
height: 100%;
margin: 0px 100px;
position: relative;
background: #fff;
}
html>body #container {height: auto; min-height: 100%;}
#footer {
position: absolute;
bottom: 0px;
background: #ffc;
width: 100%;
height: 40px;
}
hr {
height: 40px; /* enough to "pad" bottom of div so footer text is not covered with content text */
visibility: hidden;
}
</style>
</head>
<body>
<div id="container">
<p>Filler</p>
<hr />
<div id="footer">footer</div>
</div>
<!-- m --><a class="postlink" href="Suzyhttp://mark.delvar.org/Untitled-2.htm">Suzyhttp://mark.delvar.org/Untitled-2.htm</a><!-- m -->
Well that is it working in action, but the code is utterly confusing so I can't use that.Originally posted by w1ckedsick!
<!-- m --><a class="postlink" href="http://mark.delvar.org/Untitled-2.htm">http://mark.delvar.org/Untitled-2.htm</a><!-- m -->
Well that is it working in action, but the code is utterly confusing so I can't use that.
that is not totally working: if you add more content in the container and expand the page beyond the screen through amount of text, for example, the footer div is falling off the screen.
try putting this in your body, and you will see what I'm saying:
<div id="container">
<p>Filler</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<hr />
<div id="footer">footer</div>
</div>If you've got the code working doing what you want it to do, do you really need to understand it?