Css Positioning Question

[ramone_kalsaw]

Is there a css scheme for positioning <div id="footer"> so that it will lay at the "absolute" bottom of the page, with every other element above it?

 

Re: www.biom.net: In order to keep my footer from rising up and covering content in my main section, I've had to add about 25 <br/> tags at the bottom of the "leftbar" page element. (And even I know in this age of CSS this is not the most "elegant" way to position page elements

 

(Note: Right now all page elements are working fine on IE6/MyIE2 (Windows), not so good on Firefox (Windows: footer is covering icon graphic). And on Mac it's like herding cats: Safari, Firefox, and Netscape are positioning the footer at different levels.)

 

Can anyone offer some suggestions for anchoring a footer to the bottom of a page?

 

THANKS!!!

[jayson]

could try this:

 

#footer{

position: absolute;

bottom: 0px;

left: 0px;

width: 100%;

z-index: 1;

background-color: #000000;

margin: 0px;

}

[TCH-JimE]

Hello ramone_kalsaw,

 

Without know the rest of your CSS/HTML its hard to say.

 

The above solution by jayson doesn't work if the content extends off the screen (I believe)

 

If you can give us a link i will take a look

 

JimE

[ramone_kalsaw]

Hello ramone_kalsaw,

 

Without know the rest of your CSS/HTML its hard to say.

 

The above solution by jayson doesn't work if the content extends off the screen (I believe)

 

If you can give us a link i will take a look

 

JimE

The link is at www.biom.net.

 

THANKS for taking a look at this!!!

[surefire]

I think you could do it by adding an equally sized empty div, height sized to match the footer. This would be relatively positioned so that your absolutely positioned footer would fit on occassions where your content stretches the page out.

 

But you'd have to ask yourself why you wanted to do it this way when you could just relatively position the footer and set a minimum height for the div containing your content. The relative positioning kicks in when the content is long, the minimum height for the content div kicks in when it's not.

[jayson]

Hello ramone_kalsaw,

 

Without know the rest of your CSS/HTML its hard to say.

 

The above solution by jayson doesn't work if the content extends off the screen (I believe)

 

If you can give us a link i will take a look

 

JimE

 

 

Hey, I tried

[Deverill]

Do a search for "clear css footer" for sites like http://www.alistapart.com/articles/holygrail (section named #footer) that show how it works. I think that's all you're looking for.

[TCH-JimE]

Hello,

 

Hey Jayson, never mind, its best to have tried and failed then not tried at all, most of the stuff I have learnt has been through trail and error .

 

Let us know how its gone Ramone

 

Nice link Jim, another one to add to my bookmark list!

 

JimE