Menu
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?
708
Try position:fixed; bottom:0; . This will make your div to stay fixed at the bottom.
To put an element at the bottom of its container with CSS, you need to use the following properties and values: position: relative; (parent) position: absolute; (child) bottom: 0; (child)
Without using position: absolute , you'd have to vertically align it. You can use vertical-align: bottom which, according to the docs: The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
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>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:
* { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; }<!DOCTYPE html> <html> <body> <table id="container"> <tr> <td valign="top"> <div id="main">Lorem ipsum, etc.</div> </td> </tr> <tr> <td valign="bottom"> <div id="footer">Copyright some evil company...</div> </td> </tr> </table> </body> </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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
