CODEWITHSUNDEEP
htmlcss
Misha Moroshko
Misha Moroshko

Reputation: 171321

How to stick text to the bottom of the page?

I would like to put a line "All Rights Reserved..." at the bottom of the page. I tried to use absolute positioning, but this does not work as expected when the window resized to smaller height.

How can I achieve this simple goal ?

Upvotes: 28

Views: 224893

Answers (6)

Chop Labalagun
Chop Labalagun

Reputation: 612

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.

Upvotes: 10

LuckyLuke82
LuckyLuke82

Reputation: 606

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.

Upvotes: 0

Steven Clough
Steven Clough

Reputation: 21

This is how I've done it.

#copyright {
	float: left;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
	bottom: 0px;
	width: 100%;
}
		<div id="copyright">
		Copyright 2018 &copy; Steven Clough
		</div>

Upvotes: 2

Thorin Oakenshield
Thorin Oakenshield

Reputation: 14662

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>

Upvotes: 21

Konerak
Konerak

Reputation: 39763

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>

Upvotes: 34

Sergey Ilinsky
Sergey Ilinsky

Reputation: 31535

Try:

.bottom {
    position: fixed;
    bottom: 0;
}

Upvotes: 28

Related Questions