0

"Privacy policy" link is shown in the middle of my webpage. I need to set it on the bottom of my page. The below given is my CSS and HTML source codes. I can't able to set it on bottom.

#footer { width: 700px; margin: 0 auto; padding-top: 200px; } #footer p { text-align: center; padding: 30px; font-size: 10px; }
<div id="footer"> <p> Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p> </div>

Improve this question
0

2 Answers 2

Reset to default
1

Try the following solution using position:absolute;:

html, body { margin:0; padding:0; } #footer { width: 700px; margin: 0 auto; position: absolute; bottom:0; } #footer p { text-align: center; padding: 30px; font-size: 10px; }
<div id="footer"> <p> Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p> </div>

Hint: You can use position:fixed; too if you want to see the footer all the time at the end of the page (on scrolling too).

You want the link Privacy Policy" in a new line too?

You have to set the <a> on footer a block element like the following:

html, body { margin:0; padding:0; } #footer { width: 700px; margin: 0 auto; position: absolute; bottom:0; } #footer p { text-align: center; padding: 30px; font-size: 10px; } #footer a { display:block; }
<div id="footer"> <p> Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You need to change anchor tag (a) default display property with display:block.

#footer { width: 700px; margin: 0 auto; padding-top: 200px; } #footer p { text-align: center; padding: 30px; font-size: 10px; } #footer p a{display:block}
<div id="footer"> <p> Copyright&copy; 2016&nbsp;school.pythonanywhere.com.&nbsp;All Rights Reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="{% url 'privacy' %}">Privacy policy</a></p> </div>

But it will be good if you add width in your a tag, if you not add width then a tag will work with blank space on hover.

#footer p a{ display:block; max-width:80px; margin:0 auto; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.