I want to set the "privacy policy" at the end of my webpage in HTML and CSS

Question

"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>

Answer 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;
}

Answer 2

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>