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
Nandakishore J
4,641 PointsMy footer just gets as the third box. Verified code, but seems to be OK.
What should I do? You can see it at http://port-80-zu75orv4jx.treehouse-app.com/
Nandakishore J
4,641 PointsThank you for the interest. Its here:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Open+Sans:400,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <title>Nandakishore | Developer</title> </head> <body> <div> <header> <a href="index.html" id="logo"> <h1>Nandakishore</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="/img/numbers-01.jpg"> <img src="/img/numbers-01.jpg" alt="Sorry"> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="/img/numbers-02.jpg"> <img src="/img/numbers-02.jpg" alt="Sorry"> <p>Playing with blending modes</p> </a> </li> <li> <a href="/img/numbers-06.jpg"> <img src="/img/numbers-06.jpg" alt="Sorry"> <p>80s style of gloed</p> </a> </li> <li> <a href="/img/numbers-09.jpg"> <img src="/img/numbers-09.jpg" alt="Sorry"> <p>Trials with PSD brushes</p> </a> </li> <li> <a href="/img/numbers-12.jpg"> <img src="/img/numbers-12.jpg" alt="Sorry"> <p>Idiotc fellows</p> </a> </li> </ul> </section> </div> <footer> <a href="http://twitter.com/nandujkishor"><img src="img/twitter-wrap.png" alt="twitter"></a> <a href="http://facebook.com/nandakishore.jyothiprakash"><img src="img/facebook-wrap.png" alt="facebook"></a> <p>©2015, Nandakishore.</p> </footer> </div> </body> </html>
CSS:
a { text-decoration: none; color: #123456; }
wrapper {
max-width: 940px; margin : 0 auto; padding: 0 5%; }
img { max-width: 100%; }
/***************** BODY *****************/
/The body/ body { background-color: #fff; color: #999; font-family: 'Open Sans', sans-serif; }
/************ HEADING ************/
/logo id css/
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Droid Sans', sans-serif; font-weight: 400; margin: 15px 0; font-size: 1.75em; line-height: 0.8em; }
h2{ font-family: 'Droid Sans', sans-serif; font-weight: 400; margin: -5px 0 0; font-size: 0.75em; line-height: 0.8em; }
/Bluish header/ header { border-color: #657380; background: #123456; }
h1, h2 { color: #ffffff; }
/nav background on mobile/ nav { background: #657380; }
/nav links/ nav a, nav a:visited { color: #ffffff; }
/selected nav link/ nav a .selected, nav a:hover { color: #9197a3; }
/************ NAV ************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
/************ PAGE PORTFOLIO ************/
gallery {
list-style: none; margin: 0; padding: 0; }
gallery li {
float: left; width: 45%; background-color: #F5F5F5; margin: 2.5%; color: #bdc3c7; }
/************ FOOTER ************/
footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }
4 Answers
Colin Marshall
32,861 PointsAdd this to your CSS:
footer {
clear: both;
}
This makes sure that there is nothing floating to the left or to the right (hence both for left and right) of the footer.
Nandakishore J
4,641 PointsThank you, Colin Marshall. It worked with your code.
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 PointsHowever if you do add that remember that you will need to be able to float you're profile picture
Robert Skoubo
6,854 PointsI looked at your code for the page in question and one thing that I noticed is the location of your </div>:
<div id="wrapper"> <section> <ul id="gallery"> </section> </div>
You might want to put it after the footer. I looked at the HTML for the page that I did and that is where I put the </div>. (See below.) I closed off the <div> at the end of the page.
</footer> </div> </body> </html>
Good luck!
Bob
Jeremy Davis
9,427 PointsJeremy Davis
9,427 PointsHey Nandakishore,
Can you post the code you're using for this?