You might want to put the absolutely aligned div in a relatively aligned container - this way it will still be contained into the container rather than the browser window.
<div style="position: relative;background-color: blue; width: 600px; height: 800px;">
<div style="position: absolute; bottom: 5px; background-color: green">
TEST (C) 2010
</div>
</div>
Try this
<head>
<style type ="text/css" >
.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="footer">All Rights Reserved</div>
</body>
An old thread, but...Answer of Konerak works, but why would you even set size of a container by default. What I prefer is to use code wherever no matter of hog big page size is. So this my code:
<style>
#container {
position: relative;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
}
</style>
</HEAD>
<BODY>
<div id="container">
<h1>Some heading</h1>
<p>Some text you have</p>
<br>
<br>
<div id="footer"><p>Rights reserved</p></div>
</div>
</BODY>
</HTML>
The trick is in <br> where you break new line. So, when page is small you'll see footer at bottom of page, as you want.
BUT, when a page is big SO THAT YOU MUST SCROLL IT DOWN, then your footer is going to be 2 new lines under the whole content above. And If you will then make page bigger, your footer is allways going to go DOWN. I hope somebody will find this useful.
This is how I've done it.
#copyright {_x000D_
float: left;_x000D_
padding-bottom: 10px;_x000D_
padding-top: 10px;_x000D_
text-align: center;_x000D_
bottom: 0px;_x000D_
width: 100%;_x000D_
} <div id="copyright">_x000D_
Copyright 2018 © Steven Clough_x000D_
</div>Try:
.bottom {
position: fixed;
bottom: 0;
}
From my research and starting on this post, i think this is the best option:
<p style=" position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;">This will stick at the botton no matter what :).</p> This option allow resizes of the page and even if the page is blank it will stick at the bottom.
Source: Stackoverflow.com