How can I float a div element to the bottom of the screen with CSS?

Question

I am making a website with different sections, one at the bottom of the screen. I first tried putting the div element inside of a footer element. This didn’t work. The div was still at the top of the screen. I was out of ideas, so I searched for a solution on Google. Nothing I tried worked. How can I do this?

Could you try to create a [Minimal Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) which shows your issue? This might just be a snippet of the code you already have. It's difficult to suggest what you should do without seeing specifically what you are trying to achieve. — lawrence-witt, Nov 03 '20 at 21:22
Does this answer your question? [How can I position my div at the bottom of its container?](https://stackoverflow.com/questions/526035/how-can-i-position-my-div-at-the-bottom-of-its-container) — , Nov 03 '20 at 21:55
@lawrence-witt: It is "Stack Overflow" (not "StackOverflow"). See e.g. *"*[Proper Use of the Stack Exchange Name](http://stackoverflow.com/legal/trademark-guidance)"* (the last section - scroll down). — Peter Mortensen, Nov 11 '20 at 03:42

score 1 · Accepted Answer · answered Nov 03 '20 at 21:59

If you want it to always be at the bottom of the screen (IE: touching bottom of monitor) you can use

.myElementClass{
    position: absolute;
    bottom: 0;
}

Just make sure that it's not inside anything declared with position: relative or it will be stuck at the bottom of that element.

If you want it to be at the bottom of the wrapper element, use

.myWrapperClass{
    position: absolute;
}

and put the .myElementClass element inside the .myWrapperClass element

score 1 · Answer 2 · edited Nov 11 '20 at 03:46

If you need your footer to be seen always on the screen or like this at the end of the page, here is the answer. The explanation is same as zachThePerson's.

.main {
    position: relative;
    height: 700px;
    width: 100%;
    background: blue;
}

.box {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.box1 {
    width: 100px;
    height: 100px;
    background: red;
    float: right;
}

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>
    <div class="main">
      <h1>The float Property</h1>
      <p>In this example, the image will float to the right in the text.</p>

      <div class="box">
         <div class="box1"></div>
      </div>

    </div>
  </body>
</html>

score 1 · Answer 3 · edited Nov 11 '20 at 03:49

You could use Flexbox, and the below solution could be useful.

You can put the main content of your page in the div with class main-content, and with the Flexbox settings below, the footer will always be pushed to the bottom.

HTML:

<body>
  <div class="flexbox-container">
    <div class="main-content">Just a random div with some content</div>
    <div class="footer">Div to be on the bottom of the page</div>
  </div>
</body>

CSS:

.flexbox-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

The above code won't change the height of the flexbox-container div, though. So you may want to add something like this:

.flexbox-container {
  ...
  height: 100vh;
}

A good page with explanation for the Flexbox being used is A Complete Guide to Flexbox.

How can I float a div element to the bottom of the screen with CSS?

3 Answers3