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

Answer 1

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]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

  

    Copyright Foo web designs
  
  

    
    
Element 1
    
Element 2