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

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Craig Schrikker
PLUS
Craig Schrikker
Courses Plus Student 1,144 Points

Two column CSS Error

Hi guys

When I apply the two column styling, my footer jumps up and nests itself between the two columns, rather than rooting it self to the bottom of the page.

Any ideas?

6 Answers

Jeff Lemay
Jeff Lemay
14,268 Points

Floated elements kind of lose their height. You could set overflow:hidden; to the parent element, or add clear:both; to your footer.

It sounds a little odd that the footer is going between the two columns. If your columns are 50% each, there shouldn't be room there. If you're still having trouble, provide the bits of code and I (or another user) will help you out.

Craig Schrikker
PLUS
Craig Schrikker
Courses Plus Student 1,144 Points

Thanks Jeff

here is my responsive code affecting the page in question.

@media screen and (min-width: 480px) {

/******************** Two column Layout *********************/

body { background-color: navy; } #primary { width: 50%; float: left; }

#secondary {
  width: 40%;
  float: right;
}

}

I know that for some reason this is conflicting with my main.css file but can't find the source.

I have double checked my HTML code and spellings :) but still no luck.

Craig Schrikker
PLUS
Craig Schrikker
Courses Plus Student 1,144 Points

Thanks Jeff

here is my responsive code affecting the page in question.

@media screen and (min-width: 480px) {

/******************** Two column Layout *********************/

body { background-color: navy; } #primary { width: 50%; float: left; }

#secondary {
  width: 40%;
  float: right;
}

}

I know that for some reason this is conflicting with my main.css file but can't find the source.

I have double checked my HTML code and spellings :) but still no luck.

Kelly Martin
Kelly Martin
4,859 Points

Hey I had the same problem with mine. I went back to my contact.html and noticed that <footer> was before my first section. I moved i<footer> to after the second section and my footer jumped back down to the bottom of the page. Hope that helps.

Craig Schrikker
PLUS
Craig Schrikker
Courses Plus Student 1,144 Points

Uhm... here is the HTML code for my contact page.... see any errors?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Craig Schrikker | Web Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,800,600,700,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html"id="logo"> <h1> Craig Schrikker </h1> <h2>Web Desinger</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>TEXT TO GO HERE.</p> <p>TEXT TO GO HERE</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"> <a href="tel:+000000000">000000000</a></li> <li class="mail"> <a href="mailto:craig@d.com">craig@d.com</a></li> <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=NameHere">@sendtweet</a></li> </ul> </section> <footer> <a href="http://twitter.com/CraigSchrikker"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/CraigSchrikker"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a> <p>Ā© 2015 Craig Schrikker</p> </footer> </div> </body> </html>

Craig Schrikker
PLUS
Craig Schrikker
Courses Plus Student 1,144 Points

HI Guys

Please ignore my responses here. I found the error. It was a missing semi-colon in my main.css file. (silly me)

I am really thankful to you for taking the time to try and help out. :)

Thanks,

Your silly CPT coder