Solved

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

Posted on 2014-03-22
7
235 Views
Last Modified: 2014-03-22
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
Comment
Question by:Rowby Goren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948136
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39948139
You want it fixed to the bottom of the page?
Just add to div#FooterBlackBackground {}
bottom:0
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948142
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
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!

 
LVL 58

Expert Comment

by:Gary
ID: 39948143
That's what should be happening, do you have an example page where it isn't?
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39948146
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39948149
Ahh here now!

Add to the same class above
text-align: center;
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39948151
Thanks Gary!

Now I can go to sleep! :)

Rowby
0

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question