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 Responsive Web Design and Testing Build a Three Column Layout

Phil Bryer
Phil Bryer
4,851 Points
Posted by Phil Bryer
Phil Bryer
4,851 Points

Footer 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
Ahmad Abrar
9,133 Points

Use this 

footer {
   clear: both;
}
Phil Bryer
Phil Bryer
4,851 Points
Phil Bryer
Phil Bryer
4,851 Points

That worked. Thanks a lot!

Matthias Nörr
Matthias Nörr
8,614 Points
Matthias Nörr
Matthias Nörr
8,614 Points

Solved my problem too. Thanks.

Indigo Timber
Indigo Timber
5,388 Points
Indigo Timber
Indigo Timber
5,388 Points

You 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
Phil Bryer
4,851 Points
Phil Bryer
Phil Bryer
4,851 Points

I 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
Ahmad Abrar
9,133 Points
Ahmad Abrar
Ahmad Abrar
9,133 Points

Phil Bryer this might help you. Keep on hacking!! https://www.smashingmagazine.com/2009/10/the-mystery-of-css-float-property/