Solved

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

Posted on 2014-03-22
7
227 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
  • 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

776 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