Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Merianna Kachadurian
Merianna Kachadurian
904 Points

footer issues

The footer is moving to the right side of the page, i read a simliar question but there was no answer! so what should i do?

footer {
text-align: center;
  font-size: 1em;
  padding-top: 50px;
  color: #ccc;
}

   <footer>
      <a href="http://twitter.com"><img src="img/twitter-wrap.png"></a>
      <a href="http://facebook.com"><img src="img/facebook-wrap.png"></a>
    <p> &copy; Marianna Khachadourian</p>
    </footer>
      </div>
  </body>
</html>
Amrit Pandey
Amrit Pandey
17,595 Points
Amrit Pandey
Amrit Pandey
17,595 Points

Can You post whole code, that will be much help.

2 Answers

Merianna Kachadurian
Merianna Kachadurian
904 Points

that worked! thanks.

Michael Lambert
Michael Lambert
6,286 Points
Michael Lambert
Michael Lambert
6,286 Points

The problem has occurred because the container for the 'ul' elements has collapsed, ie, the 'section' element is no longer containing the list items that it contains. Using the clear:both does fix the problem but it's not the best way to fix the issue and here's why. Say you wanted to add a border to the 'section' element, it wouldn't work as you would expect due to it no longer containing your list items (portfolio).

In order to solve both the floating issue and still have the 'section' element containing the list item elements (portfolio), should you ever want to add a border around it. Then add the below css just under your navigation section.

section {
  overflow: hidden;
}

the above code will force the 'section' element to contain all the list item elements.

and if you wanted to have a border around your portfolio then you can do using the below.

section {
  border: 1px solid black;
  overflow: hidden;
}