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
Craig Schrikker
Courses Plus Student 1,144 PointsTwo 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
14,268 PointsFloated 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
Courses Plus Student 1,144 PointsThanks 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
Courses Plus Student 1,144 PointsThanks 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
4,859 PointsHey 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
Courses Plus Student 1,144 PointsUhm... 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
Courses Plus Student 1,144 PointsHI 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