First off, the site in question.

 

I want the bottom bar to appear at the bottom of each page so I added the following CSS:

 

.bottomcntr {
width: 100%;
position: fixed;
bottom: 0;
}

 

This moves the bar to the bottom of each window i.e. on a page where you have to scroll it is on the bottom of the window rather than at the end of all the content.

 

If I change it to position: absolute; the bar stays at the bottom of the page, but when scrolling down it stays where it is.

 

How can I sort this?

What are you trying to achieve (or not)?

There are two types of "sticky footer", the one fixed to the bottom all the time so other content scrolls behind it (using position: fixed; bottom: 0;) or the type where the footer stays at the window bottom if the page doesn't have much content but stays below the content if the page has a lot of content and you scroll to see it as you normally would.

See http://ryanfait.com/sticky-footer/

or http://www.wickham43.net/footerfix.php

which have more or less the same coding principle. ryanfait has a negative margin-bottom for the wrapper while my code has a negative margin-top for the footer but both achieve the same result.

not understnading what you are meaning, absolute will stay at bottom, fixed will be fixed on your screen

not understanding what you are meaning, absolute will stay at bottom, fixed will be fixed on your screen

What are you trying to achieve (or not)?

 

I'd like for the bottom bar to appear at the bottom of every page (below the content), this works out fine without positioning on a page that requires scrolling but on a page that doesn't fit the full screen the bar appears below the content but not the page.

 

No Position - Appear at bottom of every page except on a high resolution screen.

 

Absolute position - Appears at bottom of every screen until you scroll down (it stays where it is), overlaps main content.

 

Fixed position - Always at bottom of page, overlaps main content.

 

Sorry if I'm not explaining well enough.

in the css put

 

clear:both;

in the css put

 

clear:both;

 

Thanks, I'll try that when I get home from work.

 

Is that with no position?

no that is with absolute.

 

If that doesnt work do a

<div class="clear"></div>

and in the css

.class{clear:both;}

and put the div above and below the footer bit you are doing.

 

The reason alot of people are finding css bugs is because you have not got a reset css which basically resets all so you dont get these issues.

 

I use this.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

body
{
line-height: 1;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.clear{
clear: both;
}

 

put it in a seperate css file and link to pages it will reset some css issues

Like Wickham said sticky footer

Like Wickham said sticky footer

 

Sticky footer doesn't seem to be working for me, have I got the code wrong?

 

<div id="wrap">
<div id="main">
<div class="wrapper">
<div class="top"><!-- TemplateBeginEditable name="Body" -->Body<!-- TemplateEndEditable --></div>
</div>
</div>

<div id="footer">
<div class="bottom"></div>
<div class="bottomwrapper">
<div class="copyright">© Lotus Graphic Design. 2010 All rights reserved</div>
<div class="niall">Created and maintained by Niall Devlin</div>
</div>
</div>
</div>

 

@charset "utf-8";
/* CSS Document */

.wrapper {
background-color: #DDEBEB;
}

.top {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #DDEBEB;
}

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {
overflow:auto;
padding-bottom: 123px;
}  /* must be same height as the footer */

#footer {
position: relative;
margin-top: -123px; /* negative value of footer height */
height: 123px;
clear:both;
} 

/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}

.bottom {
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url(../Images/Misc/bottombar.png);
}

.bottomwrapper {
height: 22px;
margin-left: auto;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFC425;
}

.copyright {
font-weight: normal;
float:left;
font-size: 11px;
margin-left: 10px;
line-height: 20px;
}

.niall {
font-weight: normal;
float:right;
text-align: right;
font-size: 11px;
margin-right: 10px;
line-height: 20px;
}

 

Unfortunately neither of your methods worked for me RobertG, I've added reset.css to my .dwt though.

Your footer needs to be outside your wrap move your last closing div to just above your footer

Your footer needs to be outside your wrap move your last closing div to just above your footer

 

Excellent, cheers mate!