[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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