Search code examples
csslistfooteroverlappingunordered

Footer Unordered list overlapping issue

I'm having an issue with my footer that I've been trying to figure out for some time now. My unordered list is set to float right but that's causing it to go out of the parent div for some reason.

Can someone please explain to me what I'm doing wrong ?

Issue Screenshot:

enter image description here

.footer-content {
  width: 980px;
  height: 40px;
  margin: auto;
}
.footer-content p {
  padding-top: 9px;
}
.footer-content ul {
  list-style: none;
}
.footer-content ul li {
  padding-left: 10px;
  display: inline-block;
  float: right;
}
.footer-content ul li a {
  text-decoration: none;
  color: #0066cc;
}
.footer-content ul li a:hover {
  text-decoration: underline;
}
.footer-content ul li a:visited {
  color: #0066cc;
}
<footer>
  <div class="footer-content">
    <p>Copyright &copy; 2015 - 2016 Nexishost, inc. All Rights Reserved.</p>
    <ul>
      <li><a href="#">Terms & Conditions</a>
      </li>
      <li><a href="#">Privacy Policy</a>
      </li>
    </ul>
  </div>
</footer>

Solution

  • Since you are using float: right; to position your ul, you will need to float: left; the p element.

    The reason is that a p element is a block element. Thus, anything next to the element itself will be moved to it's own line. You have to essentially take out the 'full width' that is assumed by the p element itself.

    To learn a bit more about block level and inline level elements, check out this resource.