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

General Discussion

Posted by Christopher Anderson
Christopher Anderson
1,601 Points

How can I put elements at the bottom of the page

How can I put can i put the two img elements and the copy right symbol at the bottom of the page.

here's my code

https://w.trhou.se/q4z7c5z057

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Do you mean the facebook and twitter icons? Because when I fork your workspace and preview it those show up for me. Along with a copyright notice Ā© Christoper Anderson.

Kyle Sullivan
Kyle Sullivan
15,150 Points
Kyle Sullivan
Kyle Sullivan
15,150 Points

Here is my version of your footer. There are many ways this can be done and I'm sure others will show you ways that work better for them!

    <footer>
     <div class='footer-container'>

        <div class='social-icons'>

          <a href="https://twitter.com/"><img width="20px" height="20px" src="img/twitter-wrap.png" alt="twitter logo"></a>
          <a href="https://facebook.com/"><img width="20px" height="20px" src="img/facebook-wrap.png" alt="facebook logo"></a>

        </div>

        <div class='copyright'>

          <p>&copy; 2016 Christopher Anderson</p>

       </div>

     </div> 
    </footer>

Here is the styling I used to format them to the bottom of the page:

.footer-container {
  width: 100%;
  margin: auto;
}
.social-icons {
  float: left;
  padding-right: 10px;
  padding-left: 4px;
}