Margin-top for absolute positioned div with bottom property

Question

I'm creating a div as a footer as such:

<div class="content">blah blah blah</div>
<div class="content">more content</div>
<div class="content">even more content</div>
<div id="footer">blah blah blah</div>

The CSS for the footer is as follows:

#footer{
    height: 50px;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
}

So how do I leave a 50px space between content and footer? I've tried adding a spacer div between the two but yielded no success. The spacer div needs to be more than the height of content for it to have any effect. I've tried margin-top to #footer, which didn't work, but I do not want a margin-bottom for content because the content containers are multiple. Setting a bottom margin for the content would ruin how they render. Thanks for any help.

P.S. this is not a duplicate to Set position absolute and margin.

When positioned absolutely this isn't ideal... What do you want to achieve? — Milkmannetje, Nov 25 '15 at 21:39
Well, `bottom` will only work if `position: absolute `. Plus I want to keep the `#footer` at the bottom of the page. — Supreme Dolphin, Nov 25 '15 at 21:40
Can you provide a little sketch of what you are trying? We can't guess what you want from only the code you provided.... — Milkmannetje, Nov 25 '15 at 21:42
@Trouble_Zero Thanks. So the footer has to be fixed in place, and the content must be scrollable? And how responsive has it to be? — Milkmannetje, Nov 25 '15 at 22:36
The footer is not fixed actually. It just has to at the bottom of the page. It's scrollable together with the content. — Supreme Dolphin, Nov 25 '15 at 22:41

score 2 · Accepted Answer · answered Nov 25 '15 at 22:52

Okay, let give this a spin.

Maybe this helps you a bit on your way:

http://codepen.io/bbredewold/pen/avgZmj

It would help if you describe the behaviour you want to achieve, including how the page should respond at different sizes. Maybe you can fork (copy) the pen, and make some additions to help us understand your problem.

Good luck!

.outside {
  position: absolute;
  overflow: scroll;
  background: #ccc;
  bottom: 100px;
  left: 0;
  right: 0;
  top: 0;
}
.content {
  outline: 1px solid blue;
}
#footer {
  outline: 1px solid red;
  background: #ccc;
  height: 50px;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}

<div class="outside">
  <div class="content">blah blah blah</div>
  <div class="content">more content</div>
  <div class="content">even more content</div>
</div>

<div id="footer">blah blah blah</div>

@TroubleZero Can you please accept this answer if you are happy with it and it works. — Simon Merrick, Nov 26 '15 at 09:56

Simon Merrick · Answer 2 · 2015-11-26T08:56:51.517

EDIT: From your comments below, what you are looking for is a static footer

#footer{
    height: 50px;
    display: block;
    margin-top: 50px;
}

I'm such a SO noob I can't comment for more info :| . I assume you may be trying to achieve a fixed / sticky footer where the footer always appears at the bottom of the page? If you could provide an example of the effect you are trying to achieve I would be happy to edit my answer with more specific information.

Anyway because you are using absolute positioning the element is taken out of the document flow and it wont affect any other elements on the page. This means margins wont work. The same is true for fixed positioning, which is what you actually want if you are making a basic sticky footer.

If you want margin to have any effect on an element you need to set the elements display property to be a block level element (block, table, inline-block etc etc) and its positioning to either static (default) or relative.

The cleanest method for robust sticky footers is using flex box. Note the use of semantic html tags and classes instead of id's

<style>
     /**
     * 1. Avoid the IE 10-11 `min-height` bug.
     * 2. Set `flex-shrink` to `0` to prevent Chrome, Opera, and Safari from
     *    letting these items shrink to smaller than their content's default
     *    minimum size.
     */
    .site {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 1 */
    }
    .header,
    .footer {
        margin-top: 50px;
        flex-shrink: 0; /* 2 */
    }
    .content {
        flex: 1 0 auto; /* 2 */
    }
</style>

<body class="site">
    <header class="header">…</header>
    <main class="content">…</main>
    <footer class="footer">…</footer>
</body>

Courtesy of Phillip Walton http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

Note that this only works for newer browsers so if you are supporting old versions of IE you will need to use a fixed positioning based sticky footer, or forget sticky footers all together.

Thanks Simon. But I don't want the footer to stick to the bottom. I want it scrollable with the content, and as the last thing on the page, but has some space between it and the last content. — Supreme Dolphin, Nov 26 '15 at 06:45
I'm just trying to understand exactly what be behaviour you are looking for. A footer is either sticky or its not. If you want a sticky footer - use any of the code examples provided above, if not then you can just remove `position: absolute;` and add `margin-top: 50px;`. It really comes down to how you want the footer to behave when you have very little content on the page or a lot of content on the page. Do you want your users to have to scroll for eons to get to the footer when the page is super long? Do you want the footer to stay at the bottom when there is little content — Simon Merrick, Nov 26 '15 at 07:36

score 0 · Answer 3 · answered Nov 25 '15 at 22:59

Ya, it won't work like that. Because you've given #footer an absolute position, its position bears no relation to the position of the other elements in the document.

No amount of margin or padding will show between 2 things that aren't in relation to each other.

Margin-top for absolute positioned div with bottom property

3 Answers3