How can I position my div at the bottom of its con

Question

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? If the float property supported a value of 'bottom' it seems that would do the trick, but unfortunately, it doesn't.

Answer 1

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>

Answer 2

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";
}

Answer 3

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!

Answer 4

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}

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

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

Answer 5

Likely not.

Assign position:relative to #container, and then position:absolute; bottom:0; to #copyright.

---

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}

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

Answer 6

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.