Jump to content

Css Positioning Question


Recommended Posts

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 :blink:


(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?



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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





Hey, I tried :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...