After a solid two hours of strugly to rectify this, i've turned once again to you friendly people.
I'm creating a design using CSS that has a footer at the bottom, with copyright information, site validation, etc.
Is there a way that I can put it at the bottom of the content, so no-matter how long the page-length, it will always come after the content?
I could resort to iFrames, but i'm just sick of them
.
Thanks in advance for any help given.
JohnnoWell do you have a link or some code we can see but maybe this might work add it to the footer div - clear:both.The HTML.
<div id="main">
<div id="header"></div>
<div id="cap1"></div><div id="cap2"></div><div id="cap3"></div>
<div id="menu">
<p>Menu.</p>
</div>
<div id="content">
Content.
</div>
<div id="cap4"></div><div id="cap5"></div><div id="cap6"></div>
<div id="footer"></div>
</div>
And the CSS.
#main {
position:absolute; left:212px; top:5px; width:600px}
#header {
position:absolute; left:0px; top:0px; width:600px; height:80px; background: url(../images/header.jpg); background-color:#FFFFFF}
#menu {
position:absolute; left:0px; top:85px; width:120px; height:400px; overflow:visible; border-top-style:none; border-bottom-style:none;
border-left-style:solid; border-right-style:solid; border-color:#000000; border-width:2px; background-color:#FFFFFF}
#content {
position: absolute; left: 120px; top: 85px; width: 476px; height: 400px; overflow:visible; border-top-style:none; border-bottom-style:none; border-left-style:solid; border-right-style:solid; border-color:#000000; border-width:2px; background-color:#FFFFFF}
#footer {
width:600px;
height: 20px;
overflow: visible;
background-image: url(../images/copy.jpg);
background-color:#FFFFFF;
vertical-align:baseline;
}
Why would you want to permanently occupy part of the precious real estate with a least relevant information 
You mean at the bottom of the content, or the bottom of the page? Because if all you want is for it to be at the bottom of the content, then just place it after the content. But if you always want it at the bottom, even in the event that the content does not fill the page verically, you can use something like this:
function footer() {
if (document.body.offsetHeight>600)
{ document.getElementById('footer').style.top=(document.body.clientHeight-25)+"px"; } }
It tests client height, and if the screen's big enough that I know the content won't fill it, it moves the footer to the bottom of the screen. You'll have to adjust the values to suit your situation/content/footer height, etc.The reason is because he's using absolute positioning; use floats instead to position your content. Absolute positioning can get really nasty, really easily.Well that will only make the footer appear at the bottom of the content. If there's any gap in the content and the screen bottom, the footer will not be at the bottom. Even position:fixed wouldn't do it, because at smaller screen sizes, it might overlap the content.position: fixed wouldn't be a viable solution anyway, as it doesn't work in IE. Wouldn't, even with the JavaScript code, the footer be aligned to the height of the document window? What if the content itself gave a vertical scrollbar due to its extensive length -- wouldn't that cause the footer to be at the bottom of the screen but on top of the content which spans further?
I'm creating a design using CSS that has a footer at the bottom, with copyright information, site validation, etc.
Is there a way that I can put it at the bottom of the content, so no-matter how long the page-length, it will always come after the content?
I could resort to iFrames, but i'm just sick of them
.Thanks in advance for any help given.
JohnnoWell do you have a link or some code we can see but maybe this might work add it to the footer div - clear:both.The HTML.
<div id="main">
<div id="header"></div>
<div id="cap1"></div><div id="cap2"></div><div id="cap3"></div>
<div id="menu">
<p>Menu.</p>
</div>
<div id="content">
Content.
</div>
<div id="cap4"></div><div id="cap5"></div><div id="cap6"></div>
<div id="footer"></div>
</div>
And the CSS.
#main {
position:absolute; left:212px; top:5px; width:600px}
#header {
position:absolute; left:0px; top:0px; width:600px; height:80px; background: url(../images/header.jpg); background-color:#FFFFFF}
#menu {
position:absolute; left:0px; top:85px; width:120px; height:400px; overflow:visible; border-top-style:none; border-bottom-style:none;
border-left-style:solid; border-right-style:solid; border-color:#000000; border-width:2px; background-color:#FFFFFF}
#content {
position: absolute; left: 120px; top: 85px; width: 476px; height: 400px; overflow:visible; border-top-style:none; border-bottom-style:none; border-left-style:solid; border-right-style:solid; border-color:#000000; border-width:2px; background-color:#FFFFFF}
#footer {
width:600px;
height: 20px;
overflow: visible;
background-image: url(../images/copy.jpg);
background-color:#FFFFFF;
vertical-align:baseline;
}
Why would you want to permanently occupy part of the precious real estate with a least relevant information You mean at the bottom of the content, or the bottom of the page? Because if all you want is for it to be at the bottom of the content, then just place it after the content. But if you always want it at the bottom, even in the event that the content does not fill the page verically, you can use something like this:function footer() {
if (document.body.offsetHeight>600)
{ document.getElementById('footer').style.top=(document.body.clientHeight-25)+"px"; } }
It tests client height, and if the screen's big enough that I know the content won't fill it, it moves the footer to the bottom of the screen. You'll have to adjust the values to suit your situation/content/footer height, etc.The reason is because he's using absolute positioning; use floats instead to position your content. Absolute positioning can get really nasty, really easily.Well that will only make the footer appear at the bottom of the content. If there's any gap in the content and the screen bottom, the footer will not be at the bottom. Even position:fixed wouldn't do it, because at smaller screen sizes, it might overlap the content.position: fixed wouldn't be a viable solution anyway, as it doesn't work in IE. Wouldn't, even with the JavaScript code, the footer be aligned to the height of the document window? What if the content itself gave a vertical scrollbar due to its extensive length -- wouldn't that cause the footer to be at the bottom of the screen but on top of the content which spans further?