...

View Full Version : Footer/Background Issue



davm22
11-13-2010, 11:20 AM
I am still having difficulties with the footer and the background. I have a layer (Layer1) that is supposed to stretch from the top of the page to the bottom of the page and the footer will be at the bottom.

However, its not working like that. On two pages (the ones with more text/pictures that go further down the page) the Layer1 doesnt go to the bottom, instead below the layer it shows the background colour. Can anyone help with this?

Here is my Layer1 coding:


#layer1 {
position: absolute;
left: 11%;
right: 11%;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:auto;
height: 100%;
z-index: 1;
background-color: #ed1c24;
border: 10px solid #ed1c24;
padding-bottom:10px;
}


and here is my footer:


#footer {
font-size: 12px;
text-align: center;
background color: #ed1c24;
padding: 5px;
height: 10px;
width: 100%;
border: 1 px solid #000;
visibility: visible;
z-index:10;
position: absolute;
top: auto;
bottom: 0px;
}

Heres a picture of the problem.

http://img190.imageshack.us/img190/8779/footerir.png

It would be much appreciated if someone could help me out.

abduraooft
11-13-2010, 11:26 AM
It would be much appreciated if someone could help me out. Can we have a link to your page?

Excavator
11-13-2010, 04:45 PM
Hello davm22,
Your problem "On two pages (the ones with more text/pictures that go further down the page) the Layer1 doesnt go to the bottom," shows how height: 100%; works.

100% of the viewing window height... once you scroll past that you are past the 100%.

ab is right, we need a link.

davm22
11-13-2010, 11:27 PM
Hello davm22,
Your problem "On two pages (the ones with more text/pictures that go further down the page) the Layer1 doesnt go to the bottom," shows how height: 100%; works.

100% of the viewing window height... once you scroll past that you are past the 100%.

ab is right, we need a link.

I understand now, I have taken out the height:100% and now it covers the bottom of the 2 webpages. However, on the other pages it doesnt go to the bottom of the screen, only half way up the page (where the text ends).

Apologies, I dont have a way of showing the website up on the internet just now. Granted, it would be much easier

Excavator
11-13-2010, 11:50 PM
"However, on the other pages it doesnt go to the bottom of the screen, only half way up the page (where the text ends)."

Yes, that's normal behavior for a div.
To make a full height layout takes just a little more work. Have a look at this example. (http://nopeople.com/CSS/full-height-layout/index.html)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum