Properly position footer

Question

I am trying to position a footer under #cont, but inside the #container. I tried making it so that when there is more content in #content, it would keep the footer inside the div, and allow me to scroll the page, but I got lost. Any idea how I should do it?

http://jsfiddle.net/a9jv7/

As you can see, more content will push it down(because it's not inside the other div, but if it's not inside, I can't set the footer to always be on the bottom of the page)

Answer 1

You can change the floating elements to display: inline-block, so you have more control over them and the container will adapt to their height.

#footer {
  background-color:#FFA500;
  text-align:center;
  max-width:960px;
  width: 100%;
}

The example: http://jsfiddle.net/frapporti/TPbCG/

---

EDIT: In general, I'd really like to advice you against the use of floating elements for layout, as they were pushed beyond they original intended use from the very beginning, and now we have flex who does magic :)

1. http://html5hub.com/after-float/
2. http://jsfiddle.net/Cerebrl/ZkQnD/

Answer 2

If I understood what you want to achieve correctly, than this is one way to do it:

http://jsfiddle.net/a9jv7/1/

On #container add:

border-bottom:30px solid transparent; // used to add spacing bottom
margin-bottom:-30px; // used to add spacing bottom
overflow:hidden; // to give the container height, because it has none since the elements inside it are float-ed; (google clear-float).