Css Footer problem

[gokeeffe]

Hi,

I have tried to use the following code but the footer will not stay at the end of the screen no matter what I try.

ie. the footer scrolls up and does not stay at the end

Can anyone see why.

I hope the code isn't too confusing.

I am using a three column layout with a header at the top.

Would really like to get this to work.


/************************ Start of CSS file ********************************/
html, body, #contents {
min-height:100%;
width:100%;
height:100%;
}

html>body, html>body #contents{
height:auto;
}

#contents{
position:absolute;
top:0;
left:0;
}

#footer{
position:absolute;
bottom:0;
width:100%;
border-top:1px solid #333333;
background-color: #000033;
color: #ffffff;
font-size:70%;
}


#footer p{
margin: 0.5em 0 1em 2em;
padding: 0;
}
/****************************** End of CSS file *******************************/

 

[Foamcow]

By "the end of the page" do you mean the end of your content or the bottom of the browser window?
These are two entirely different things.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[gokeeffe]

Sorry,

I mean when the content in the center is long enough, it works fine but when the content is not when you scroll down the footer detaches from the end of the browser.

I hope you know what I mean

 

[Foamcow]

Could it be because your footer is absolutely positioned at the bottom of the browser window?
If you absolutely position an element then that is where it is going to be regardless of the other elements on your page.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[gokeeffe]

I got this code from a book called 101 essential css tip and tricks (sitepoint) and they said to use absolute positioning, do you know of any other way to do this.

Tks

Graham

 

[Foamcow]

If you want the footer fixed at the bottom of the browser window, then use absolute positioning. But as you have found if you do so and your content extends beyond the bottom of the window then your footer isn't at the foot of your content.

Why not just put the footer at the end of the content?

I can't say I've ever run into this really since I don't design pages to be fixed sizes if I can possibly help it. So my footers go under my content. The browser is merely a "view portal" that people look through to see the pages, it can be whatever size the user wants, it's none of my business.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Vragabond]

I think it is time to get a better book. I cannot see any columns in the code you posted, but I guess it could be because you omitted some of the code. Anyway, you're using only absolute positioning, meaning that no elements on your page interact with each other. Absolute positioned elements are taken out of the flow and are invisible to other elements. Thus no element on the page knows where the other one ends. As such, you can position things around the page, but don't look for interaction. If you want that, use normal document flow.

 

[Foamcow]

Yarr, document flow... that's what I was trying (and failing) to talk about.
Hard to think of the right thing to say when it's late and I'm tired

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time