tim_carter
asked on
Attach a Div to bottom of browser even when scrolling
Hi guys
How do i make a div, that is attached to the bottom of the browser, even when scrolling.. Something like Facebook is doing with their messenger part
Thanks
How do i make a div, that is attached to the bottom of the browser, even when scrolling.. Something like Facebook is doing with their messenger part
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
hi tim_carter, fyi position:fixed doesn't work in IE6, so depending on your audience that may be an issue if you decide to use it in your page.
To get a "sticky footer" that works cross-browser, see http://ryanfait.com/sticky-footer/. Note if you decide to use Ryan Fait's approach, it has a minor issue with IE7 that can be corrected by putting the height:100% in an lte IE6 conditional comment.
Other info about making IE6 emulate fixed positioning here http://www.cssplay.co.uk/layouts/fixed.html.
To get a "sticky footer" that works cross-browser, see http://ryanfait.com/sticky-footer/. Note if you decide to use Ryan Fait's approach, it has a minor issue with IE7 that can be corrected by putting the height:100% in an lte IE6 conditional comment.
Other info about making IE6 emulate fixed positioning here http://www.cssplay.co.uk/layouts/fixed.html.
ASKER
Hi yessirnosir
What is the minor issue you refer to?
What could happend
Thanks alot
What is the minor issue you refer to?
What could happend
Thanks alot
that footer is supposed to fluidly move if you resize your browser window -- you will see the correct behavior in FF or Safari or even IE6. But in IE7, the footer stays put if you make the browser window taller, until you hit "refresh", which causes the footer to pop down to the right spot. So when I use the sticky footer layout now, I change the CSS to just include the standard code that works in all modern browsers (a group in which I'll grudgingly include IE7!), and keep the IE6 only hack in a conditional style block, i.e.:
.wrapper {
min-height: 100%;
height: auto ; /* removed !important */
/* removed height:100%; */
then in my page header I put this conditional block to take care of IE6 only:
<!--[if lt IE 7]>
<style type="text/css">
.wrapper {height: 100%;}
</style>
<![endif]-->
Note that this whole "sticky footer" thing isn't really what you had asked for, i.e. it won't stay in place over top of scrolling content. But when people start asking about sticking things to the bottom of a window, they often find this example useful, even if not exactly what they want.
.wrapper {
min-height: 100%;
height: auto ; /* removed !important */
/* removed height:100%; */
then in my page header I put this conditional block to take care of IE6 only:
<!--[if lt IE 7]>
<style type="text/css">
.wrapper {height: 100%;}
</style>
<![endif]-->
Note that this whole "sticky footer" thing isn't really what you had asked for, i.e. it won't stay in place over top of scrolling content. But when people start asking about sticking things to the bottom of a window, they often find this example useful, even if not exactly what they want.
ASKER
ok thanks alot for your help
you're welcome...
just one other thought -- some people have decided the time has come to abandon trying to code for IE6 deficiencies, and instead use a JS library available from a google project that makes IE5/6 behave like IE7 or 8. http://code.google.com/p/ie7-js/ You'll see in the link that the JS is added inside conditional comments, so newer browsers don't even see the code. It would free you up to use position:fixed and other features of CSS that Bill Gates didn't think you cared about.
The only real downside to that approach is that the true dinosaurs also have JS disabled, so your site would look really strange for them. But I think we may have arrived at the point where we can just ignore that... with IE6 fading fast, it is probably only a tiny fraction of 1% of users that might be running IE6 without javascript.
just one other thought -- some people have decided the time has come to abandon trying to code for IE6 deficiencies, and instead use a JS library available from a google project that makes IE5/6 behave like IE7 or 8. http://code.google.com/p/ie7-js/ You'll see in the link that the JS is added inside conditional comments, so newer browsers don't even see the code. It would free you up to use position:fixed and other features of CSS that Bill Gates didn't think you cared about.
The only real downside to that approach is that the true dinosaurs also have JS disabled, so your site would look really strange for them. But I think we may have arrived at the point where we can just ignore that... with IE6 fading fast, it is probably only a tiny fraction of 1% of users that might be running IE6 without javascript.
ASKER