footer not at bottom of page

How do I make the footer stay at bottom and why does the code at least show the 1em margin-top for the footer in order to separate it from the aside and article elements? Thank you.

            <link rel="stylesheet" type="text/css" href="stylesheet.css" />




      height: 100vh;

      border: 2px solid black;
      height: 100%;

header {
      width: 100%;
      height: 100px;
      background-color: gray;
      margin-bottom: 1em;

      width: 250px;
      height: 300px;
      background-color: blue;
      float: left;

      width: 250px;
      height: 300px;
      background-color: red;
      float: right;

      width: 100%;
      height: 100px;
      background-color: gray;
      clear: both;
      bottom: 0;
      margin-top: 1em;
Who is Participating?
COBOLdinosaurConnect With a Mentor Commented:
bottom 0; is not going to work without content.

If you want it at the bottom content then you need to use position:absolute and if you want it at the bottom of the screen all the time then you want it to be position:fixed with a z-in dex of 10 or more.

height 100% for the body is interpreted differently by different browsers/versions.  I you do not have enough content to fill the screen then there is no guarantee that will work.

Is it supposed to stick to the bottom regardless or only when there is not enough content to push it down?
Like here
centemAuthor Commented:
How about the margin-top 1em not separating the top of the footer from the aside and article elements?
GaryConnect With a Mentor Commented:
Change your aside to display: inline-block; and not floated
Or add the margin to the aside or article.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.