[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

How do I keep a div at the bottom of the page

Hello CSS Experts

I have a div that contains a menu -- that I want to keep at the bottom of the pages.

I assume it has something to do with "absolute" or "relative" or something like that :)

In my next comment I will post a link to a test development page.

Looking forward to your excellent solution!

Thanks,

Rowby
0
Rowby Goren
Asked:
Rowby Goren
  • 4
  • 3
2 Solutions
 
Rowby GorenAuthor Commented:
Ok --

Here's the link to the Link to test pagetest page:

The bottom menu is near the bottom,  but I want it to be always at the bottom of the browser.  No space below it.

Thanks
0
 
GaryCommented:
You want it fixed to the bottom of the page?
Just add to div#FooterBlackBackground {}
bottom:0
0
 
Rowby GorenAuthor Commented:
Thanks Gary,

I added your code and that did the trick!

I was editing my last comment when I was prevented from editing it.

I wanted to add this one additional "requirement"....

If the main area has a lot of text, I need the text to scroll "behind" the bottom div/menu.

Like on this page  Example of text rolling "behind" the bottom div/menu
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
GaryCommented:
That's what should be happening, do you have an example page where it isn't?
0
 
Rowby GorenAuthor Commented:
Ah --- you're right.  I added text to the test page and it is indeed going behind the div.

Anything else I should know before I award the points?

Maybe centering the menu, while you're at it?

Thanks!
0
 
GaryCommented:
Ahh here now!

Add to the same class above
text-align: center;
0
 
Rowby GorenAuthor Commented:
Thanks Gary!

Now I can go to sleep! :)

Rowby
0

Featured Post

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now