asked on

Small Box at the bottom of the screen

I am trying to get a small colored box the the bottom of the screen. I understand that it is possible to arrange things in CSS from the top left of the corner, so having something that is flush with the top, should be pretty straight forward. But I am uncertain of how to put a small box in the center of the screen, that is flush with the bottom of the page. I am looking to just have a black box, that has some sort of photo credit info that sits at the bottom of the page. Any ideas on how to stick a box to the bottom of a HTML page?

Randy Downs

You can put your box in a footer. Here's how to stick the footer to the bottom.

http://starikovs.com/2012/02/23/stick-footer-css/

<div id="footer">Footer</div>¿

Open in new window

CSS

#footer {
    width: 100%;
    height: 100px;
    margin-top: -100px;
    box-sizing: border-box;
    padding: 10px;
    border-top: 3px solid gray;
    background-color: lightyellow;
    text-align: center;
  }

Open in new window

Randy Downs

Here's an article on CSS boxes
http://learnwebcode.com/css-box-model-margin/

stakor

ASKER

When I use:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Footer Test</title>
<style>

.footer {
    width: 100%;
    height: 100px;
    margin-top: -100px;
    box-sizing: border-box;
    padding: 10px;
    border-top: 3px solid gray;
    background-color: lightyellow;
    text-align: center;
}

</style>  
</head>

<body>
<div id="footer">Footer!</div>
</body>
</html>

Open in new window

I get the word Foot at the top left of the page.

When I use:

#footer {

Open in new window

I get a light yellow box, without text at the top of the page.

Randy Downs

#footer is an ID
.footer is a class

http://www.w3schools.com/css/css_id_class.asp

http://www.tizag.com/cssT/display.php - Class example

Your footer class is defining a lightyellow box. You call it with <div class="footer">Footer!</div>

.footer {
    width: 100%;
    height: 100px;
    margin-top: -100px;
    box-sizing: border-box;
    padding: 10px;
    border-top: 3px solid gray;
    background-color: lightyellow;
    text-align: center;
}

Open in new window

stakor

ASKER

Ok. ID = unique element, and Class = reusable element, probably used multiple times. I now get that part.

My I am still facing the problem that the yellow box is a header, and not a footer. It is flush with the top of the page, not the bottom. I see that it is 100% width, and 100px height. That is all good. I just don't know how to make it go to the bottom.

ASKER CERTIFIED SOLUTION

Randy Downs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Randy Downs

If you are using your footer class change the code accordingly. Alternatively make your footer class a footer ID