[html] How can I position my div at the bottom of its container?

Given the following HTML:

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

I would like #copyright to stick to the bottom of #container. Can I achieve this without using absolute positioning?

Try this;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

CodePen link here.

html, body {_x000D_
    width: 100%;_x000D_
    height: 100%;_x000D_
}_x000D_
_x000D_
.overlay {_x000D_
    min-height: 100%;_x000D_
    position: relative;_x000D_
}_x000D_
_x000D_
.container {_x000D_
    width: 900px;_x000D_
    position: relative;_x000D_
    padding-bottom: 50px;_x000D_
}_x000D_
_x000D_
.height {_x000D_
    width: 900px;_x000D_
    height: 50px;_x000D_
}_x000D_
_x000D_
.footer {_x000D_
    width: 900px;_x000D_
    height: 50px;_x000D_
    position: absolute;_x000D_
    bottom: 0;_x000D_
}

<div class="overlay">_x000D_
    <div class="container">_x000D_
        <div class="height">_x000D_
            content_x000D_
        </div>_x000D_
    </div>_x000D_
_x000D_
    <div class="footer">_x000D_
        footer_x000D_
    </div>_x000D_
</div>

While none of the answers provided here seemed to apply or work in my particular case, I came across this article which provides this neat solution :

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

I find it very useful for applying responsive design for mobile display without having to reorder all the html code of a website, setting body itself as a table.

Note that only the first table-footer-group or table-header-group will be rendered as such : if there are more than one, the others will be rendered as table-row-group.

Also, if there's stipulations with using position:absolute; or position:relative;, you can always try padding parent div or putting a margin-top:x;. Not a very good method in most cases, but it may come in handy in some cases.

Maybe this helps someone: You can always place the div outside the other div and then push it upwards using negative margin:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

Just because this hasn't been mentioned at all, what usually works well in situations like yours:

Placing the copyright-div after the container-div

You would only have to format the copyright-div in a similar way to the other container (same overall width, centering, etc.), and all is fine.

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

The only time this might not be ideal is when your container-div is declared with height:100%, and the user would need to scroll down to see the copyright. But even still you could work around (e.g. margin-top:-20px - when the height of your copyright element is 20px).

• No absolute positioning
• No table layout
• No crazy css, that looks different in every other browser (well IE at least, you know)
• Simple and clear formatting

Aside: I know the OP asked for a solution that "... sticks to the bottom of the 'container' div ...", and not something under it, but come on, people are looking for good solutions here, and this is one!

CSS Grid

Since the usage of CSS Grid is increasing, I would like to suggest align-self to the element that is inside a grid container.

align-self can contain any of the values: end, self-end, flex-end for the following example.

#parent {_x000D_
  display: grid;_x000D_
}_x000D_
_x000D_
#child1 {_x000D_
  align-self: end;_x000D_
}_x000D_
_x000D_
/* Extra Styling for Snippet */_x000D_
_x000D_
#parent {_x000D_
  height: 150px;_x000D_
  background: #5548B0;_x000D_
  color: #fff;_x000D_
  padding: 10px;_x000D_
  font-family: sans-serif;_x000D_
}_x000D_
_x000D_
#child1 {_x000D_
  height: 50px;_x000D_
  width: 50px;_x000D_
  background: #6A67CE;_x000D_
  text-align: center;_x000D_
  vertical-align: middle;_x000D_
  line-height: 50px;_x000D_
}

<div id="parent">_x000D_
  <!-- Other elements here -->_x000D_
  <div id="child1">_x000D_
    1_x000D_
  </div>_x000D_
_x000D_
</div>

According: w3schools.com

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

So you need to position the parent element with something either relative or absolute, etc and position the desired element to absolute and latter set bottom to 0.

Div of style, position:absolute;bottom:5px;width:100%; is working, But it required more scrollup situation.

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}

Actually, the accepted answer by @User will only work if the window is tall and the content is short. But if the content is tall and the window is short, it will put the copyright info over the page content, and then scrolling down to see the content will leave you with a floating copyright notice. That makes this solution useless for most pages (like this page, actually).

The most common way of doing this is the "CSS sticky footer" approach demonstrated, or a slightly slimmer variation. This approach works great -- IF you have a fixed height footer.

If you need a variable height footer that will appear at the bottom of the window if the content is too short, and at the bottom of the content if the window is too short, what do you do?

Swallow your pride and use a table.

For example:

* {_x000D_
    padding: 0;_x000D_
    margin: 0;_x000D_
}_x000D_
_x000D_
html, body {_x000D_
    height: 100%;_x000D_
}_x000D_
_x000D_
#container {_x000D_
    height: 100%;_x000D_
    border-collapse: collapse;_x000D_
}

<!DOCTYPE html>_x000D_
<html>_x000D_
<body>_x000D_
    <table id="container">_x000D_
        <tr>_x000D_
            <td valign="top">_x000D_
                <div id="main">Lorem ipsum, etc.</div>_x000D_
            </td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
            <td valign="bottom">_x000D_
                <div id="footer">Copyright some evil company...</div>_x000D_
            </td>_x000D_
        </tr>_x000D_
    </table>_x000D_
</body>_x000D_
</html>

Try it out. This will work for any window size, for any amount of content, for any size footer, on every browser... even IE6.

If you're cringing at the thought of using a table for layout, take a second to ask yourself why. CSS was supposed to make our lives easier -- and it has, overall -- but the fact is that even after all these years, it's still a broken, counter-intuitive mess. It can't solve every problem. It's incomplete.

Tables aren't cool, but at least for now, they are sometimes the best way to solve a design problem.

If you want it to "stick" to the bottom, regardless of the height of container, then absolute positioning is the way to go. Of course, if the copyright element is the last in the container it'll always be at the bottom anyway.

Can you expand on your question? Explain exactly what you're trying to do (and why you don't want to use absolute positioning)?

Yes you can do this without absolute positioning and without using tables (which screw with markup and such).

DEMO
This is tested to work on IE>7, chrome, FF & is a really easy thing to add to your existing layout.

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

It effectively does what float:bottom would, even accounting for the issue pointed out in @Rick Reilly's answer!

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {_x000D_
  height: 100px;_x000D_
  border: 5px solid #000;_x000D_
  display: flex;_x000D_
  flex-direction: column;_x000D_
}_x000D_
.child {_x000D_
  height: 40px;_x000D_
  width: 100%;_x000D_
  background: #f00;_x000D_
  margin-top: auto;_x000D_
}

<div class="parent">_x000D_
  <div class="child">Align to the bottom</div>_x000D_
</div>

The solution above is probably more flexible, however, here is an alternative solution:

Example Here

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

.parent {_x000D_
  height: 100px;_x000D_
  border: 5px solid #000;_x000D_
  display: flex;_x000D_
}_x000D_
.child {_x000D_
  height: 40px;_x000D_
  width: 100%;_x000D_
  background: #f00;_x000D_
  align-self: flex-end;_x000D_
}

<div class="parent">_x000D_
  <div class="child">Align to the bottom</div>_x000D_
</div>

As a side note, you may want to add vendor prefixes for additional support.

If you do not know the height of child block:

#parent {_x000D_
    background:green;_x000D_
    width:200px;_x000D_
    height:200px;_x000D_
    display:table-cell;_x000D_
    vertical-align:bottom;_x000D_
}_x000D_
.child {_x000D_
    background:red;_x000D_
    vertical-align:bottom;_x000D_
}

<div id="parent">_x000D_
    <div class="child">child_x000D_
    </div> _x000D_
</div>

http://jsbin.com/ULUXIFon/3/edit

If you know the height of the child block add the child block then add padding-top/margin-top:

#parent {_x000D_
    background:green;_x000D_
    width:200px;_x000D_
    height:130px;_x000D_
    padding-top:70px;_x000D_
}_x000D_
.child {_x000D_
    background:red;_x000D_
    vertical-align:_x000D_
    bottom;_x000D_
    height:130px;_x000D_
}

<div id="parent">_x000D_
    <div class="child">child_x000D_
    </div> _x000D_
</div>  

Don't wanna use "position:absolute" for sticky footer at bottom. Then you can do this way:

 html,_x000D_
        body {_x000D_
            height: 100%;_x000D_
            margin: 0;_x000D_
        }_x000D_
        .wrapper {_x000D_
            min-height: 100%;_x000D_
            /* Equal to height of footer */_x000D_
            /* But also accounting for potential margin-bottom of last child */_x000D_
            margin-bottom: -50px;_x000D_
        }_x000D_
        .footer{_x000D_
            background: #000;_x000D_
            text-align: center;_x000D_
            color: #fff;_x000D_
        }_x000D_
        .footer,_x000D_
        .push {_x000D_
            height: 50px;_x000D_
        }

<html>_x000D_
<body>_x000D_
    <!--HTML Code-->_x000D_
    <div class="wrapper">_x000D_
        <div class="content">content</div>_x000D_
        <div class="push"></div>_x000D_
    </div>_x000D_
    <footer class="footer">test</footer>_x000D_
</body>_x000D_
</html>

Create another container div for the elements above #copyright. Just above copyright add a new div: <div style="clear:both;"></div> It will force the footer to be under everything else, just like in the case of using relative positioning (bottom:0px;).

You can indeed align the box to the bottom without using position:absolute if you know the height of the #container using the text alignment feature of inline-block elements.

Here you can see it in action.

This is the code:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}

Its an old question, but this is a unique approach that can help in several cases.

Pure CSS, Without Absolute positioning, Without Fixing any Height, Cross-Browser (IE9+)

check out that Working Fiddle

Because normal flow is 'top-to-bottom' we can't simply ask the #copyright div to stick to the bottom of his parent without absolutely positioning of some sort, But if we wanted the #copyright div to stick to the top of his parent, it will be very simple - because this is the normal flow way.

So we will use this in our advantage. we will change the order of the divs in the HTML, now the #copyright div is at the top, and the content follow it right away. we also make the content div stretch all the way (using pseudo elements and clearing techniques)

now it's just a matter of inverting that order back in the view. that can be easily done with CSS transform.

We rotate the container by 180deg, and now: up-is-down. (and we inverse back the content to look normal again)

If we want to have a scroolbar within the content area, we need to apply a little bit more of CSS magic. as can be showed Here [in that example, the content is below a header - but its the same idea]

* {_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
_x000D_
html,_x000D_
body,_x000D_
#Container {_x000D_
  height: 100%;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
#Container:before {_x000D_
  content: '';_x000D_
  height: 100%;_x000D_
  float: left;_x000D_
}_x000D_
_x000D_
#Copyright {_x000D_
  background-color: green;_x000D_
}_x000D_
_x000D_
#Stretch {_x000D_
  background-color: blue;_x000D_
}_x000D_
_x000D_
#Stretch:after {_x000D_
  content: '';_x000D_
  display: block;_x000D_
  clear: both;_x000D_
}_x000D_
_x000D_
#Container,_x000D_
#Container>div {_x000D_
  -moz-transform: rotateX(180deg);_x000D_
  -ms-transform: rotateX(180deg);_x000D_
  -o-transform: rotate(180deg);_x000D_
  -webkit-transform: rotateX(180deg);_x000D_
  transform: rotateX(180deg);_x000D_
}

<div id="Container">_x000D_
  <div id="Copyright">_x000D_
    Copyright Foo web designs_x000D_
  </div>_x000D_
  <div id="Stretch">_x000D_
    <!-- Other elements here -->_x000D_
    <div>Element 1</div>_x000D_
    <div>Element 2</div>_x000D_
  </div>_x000D_
</div>

Using the translateY and top property

Just set element child to position: relative and than move it top: 100% (that's the 100% height of the parent) and stick to bottom of parent by transform: translateY(-100%) (that's -100% of the height of the child).

BenefitS

• you do not take the element from the page flow
• it is dynamic

But still just workaround :(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

Don't forget prefixes for the older browser.

Here is an approach targeted at making an element with a known height and width (at least approximately) float to the right and stay at the bottom, while behaving as an inline element to the other elements. It is focused at the bottom-right because you can place it easily in any other corner through other methods.

I needed to make a navigation bar which would have the actual links at the bottom right, and random sibling elements, while ensuring that the bar itself stretched properly, without disrupting the layout. I used a "shadow" element to occupy the navigation bar's links' space and added it at the end of the container's child nodes.

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

For those only have one child in the container, you can use the table-cell and vertical-align approach which worked reliably for positioning a single div at the bottom of its parent.

Note that using table-footer-group as other answers mentioned will break the height calculation of parent table.

#container {_x000D_
    display: table;_x000D_
    width: 100%;_x000D_
    height: 200px;_x000D_
}_x000D_
#item {_x000D_
    display: table-cell;_x000D_
    vertical-align: bottom;_x000D_
}

<div id="container">_x000D_
    <div id="item">Single bottom item</div>_x000D_
</div>

There is nothing called float:bottom in CSS. The best way is using positioning in such cases:

position:absolute;
bottom:0;