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 trialPhil Bryer
4,851 PointsFooter is not staying in place on Contact page
I'm not sure what I'm missing, but when I add the primary and secondary columns in responsive.css my footer in the Contact page pops up in between them instead of staying at the bottom of the page. I don't see anything in the code that's different than what I typed. Maybe I just need another set of eyes.
Contact.html:
<div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am not currently looking for new design work but I am available for speaking gigs and similar engagements. If you have any questions please don't hesitate to contact me.</p> <p>Please only use phone contact for urgent inquiries. Otherwise twitter and e-mail are the best way to reach me.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mail"><a href="mailto:phil@example.com">phil@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Phil Bryer.</p> </footer> </div>
Responsive.css:
@media screen and (min-width: 480px) {
/**************************
TWO COLUMN LAYOUT
**************************/
#primary { width: 50%; float: left; }
#secondary {
width: 40%;
float: right;
}
}
@media screen and (min-width: 660px) {
}
3 Answers
Ahmad Abrar
9,133 PointsUse this
footer {
clear: both;
}
Indigo Timber
5,388 PointsYou could also add a clearfix. Maybe it's not in the scope of that lesson, but it is a good way to avoid collapsing elements when using floats. If you place the content above the footer in a parent div and add the class clearfix, the footer will stay below the floated elements.
Here is a good clearfix which you can add to your css. Treehouse also has some good videos about floats and clearfixes in the css courses.
Phil Bryer
4,851 PointsI appreciate the help. I'm still new to this, and although this and the comment above appear to have worked, I still don't really understand what caused this to happen. What exactly made the footer that did not have the primary or secondary class pop up in between the columns?
Ahmad Abrar
9,133 PointsPhil Bryer this might help you. Keep on hacking!! https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/
Phil Bryer
4,851 PointsPhil Bryer
4,851 PointsThat worked. Thanks a lot!
Matthias Nörr
8,614 PointsMatthias Nörr
8,614 PointsSolved my problem too. Thanks.