Avatar of stakor
stakor
Flag for United States of America 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?
HTML

Avatar of undefined
Last Comment
Randy Downs

8/22/2022 - Mon
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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Randy Downs

If you are using your footer class change the code accordingly. Alternatively make your footer class a footer ID
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.