HTML/CSS positioning "float: bottom"

Question

Hi,

Given the following HTML:

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

I would like the div with ID 'copyright' to stick to the bottom of the 'container' div, 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.....

Thanks, Don

Answer 1

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)?

Answer 2

Likely not.

Assign "position:relative" to your "container" div, and then "position:absolute;bottom:0;" to your "copyright" div.

Answer 3

One of the problems with this is what happens when the content is already greater than the window height. If you could use javascript you could determine the height of the container div and the window then position things properly.

Answer 4

Try this;

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

Answer 5

This might help: http://www.cssstickyfooter.com/

Answer 6

There are many tricks to do this in pure css, Most have some cross browser complications. If you can, you should really try to evaluate your design and see if you can just place the element on the bottom of your design and set a min-height on the element. instead of trying to get the element to sit nicely inside the window.

Answer 7

Couldn't you just float the div and assign it a bottom property of zero?

Answer 8

This one worked perfectly for me: http://ryanfait.com/sticky-footer/

Answer 9

@Jordan: No. Floats and absolute positioning (bottom: 0) are mutually exclusive. You can't mix them. (Would add as a comment, but don't have enough reputation to do that yet...)