[RESOLVED] How do I get a floating <div>?

[blakemckenna]

I have a <div> element that I want to always be at the bottom of the page even if it means having to scroll down to the bottom of the page. I'm not sure how to accomplish this.

Thanks,

[akhileshbc]

I think, what you are looking for is positioning the div as fixed (which would place the div relative to the browser window).

Check this: http://www.w3schools.com/cssref/pr_class_position.asp

[blakemckenna]

Unfortunately that's not what I'm looking for. I'm not sure how to explain it I guess. Lets say my page appears and their is no need to scroll. I want this particular <div> to appear at the bottom of the page.

The other scenario is that I have another <div> that requires scrolling. So, when the user scrolls to the bottom of the page, that's where I want this <div> to appear.

Thanks,

[akhileshbc]

hmm... I am confused

Can you show an example of what you get and what are you expecting ?

If you have the page live, then let me know the URL.

[blakemckenna]

This website is still in development mode and does not have it's own URL yet.
Can't think of another example.

The easiest way I can think is that this <div> is at the very end of the markup code. Their are other <div> before this in the markup that can be displayed and consequently long enough for it to be scrolled. But if none of these other <div> are displayed, I want this <div> to be displayed at the bottom of the screen. I can't think of any other way to explain it.

Thanks,

[akhileshbc]

Is it like those "social share" bar seen in some of the sites ? It will be there all the time at the bottom of the SCREEN, even if the user scrolls up or down ?

[blakemckenna]

No...not like those. If you can see the entire content of the page without scrolling...then it should be at the bottom of the screen. If you have to scroll the viewable content...then you shouldn't see it until you scroll to the bottom of the page. Hope that helps!

[akhileshbc]

Sorry, but I am lost. Any visual examples would be the best option I think.

[blakemckenna]

I actually figured it out. I set the "position:" to "table" and that took care of it!

[akhileshbc]

Glad to hear that you resolved it by yourself.

Is "table" value available for "position" attribute ?
http://www.w3schools.com/cssref/pr_class_position.asp

If you don't mind, can you please post the screenshots of "before" and "after". And also the code. Because, that might help me to understand as well as could help me in the future when I meet similar issue.

[blakemckenna]

Yes...

.Sample
{
position: table;
}

[sapator]

I have no knowledge of position:table;Can you show some examples?
What i am suspecting is that with using table, that is as far as i know not a position element, you either set position:static (that is the default) or position:inherit, without understanding it.Anyhow i would be glad to see that position:table you mention if it exists since i haven't head it.

[blakemckenna]

I don't have any examples other than what I found on my own...which is what I used to fix my problem.