ramone_kalsaw Posted March 9, 2006 Share Posted March 9, 2006 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!!! Quote Link to comment Share on other sites More sharing options...
jayson Posted March 9, 2006 Share Posted March 9, 2006 could try this: #footer{ position: absolute; bottom: 0px; left: 0px; width: 100%; z-index: 1; background-color: #000000; margin: 0px; } Quote Link to comment Share on other sites More sharing options...
TCH-JimE Posted March 9, 2006 Share Posted March 9, 2006 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 Quote Link to comment Share on other sites More sharing options...
ramone_kalsaw Posted March 9, 2006 Author Share Posted March 9, 2006 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!!! Quote Link to comment Share on other sites More sharing options...
surefire Posted March 9, 2006 Share Posted March 9, 2006 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. Quote Link to comment Share on other sites More sharing options...
jayson Posted March 10, 2006 Share Posted March 10, 2006 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 Quote Link to comment Share on other sites More sharing options...
Deverill Posted March 10, 2006 Share Posted March 10, 2006 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. Quote Link to comment Share on other sites More sharing options...
TCH-JimE Posted March 14, 2006 Share Posted March 14, 2006 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.