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
Natalie E
1,897 PointsIssues with Float and Footer
This may not be a huge issue, but I'm not sure why this is happening. While working along with the videos everything is fine except my fifth image is aligning to the right instead of the left and my footer is in the correct spot. I'm just not sure how to fix this so that my last image aligns to the left instead. In the video it shows the footer floating up into the image gallery, but since one of my images is there, that isn't happening. I double checked my code and I still can't figure out why it's happening this way.
8 Answers
. Ali
9,799 PointsHi Natalie, So I believe that you want your footer to be right at the bottom of the page??? Am i right
I have modified the code and have a look at the link. Basically the gallery list item are floating to the left. As they are floating to the left, footer is taking up the available place. hence if you add,
footer {
clear: left;
}
That will do the trick. let me know if thats what you asked for .. thanks
. Ali
9,799 PointsNatalie could you share your code with us :) thanks
Justin Hunter
Courses Plus Student 11,484 PointsWithout seeing the code, the only guess I have is an issue with the float. Do you have the image floated left?
Natalie E
1,897 PointsSorry! Here's the CSS. If you need more info let me know!/******************** PAGE: PORTFOLIO ********************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p{
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
/******************** FOOTER ********************/
footer { font-size 0.75em; text-align: center; padding-top: 50px; color: #ccc; }
Justin Hunter
Courses Plus Student 11,484 PointsMy guess is you need to clear the footer. You have the gallery floated, but perhaps if you add:
footer { clear: both; }
You might solve the problem. It's tough without seeing all the code and where you are in the project.
. Ali
9,799 PointsHi Natalie, The best thing to do is copy and paste your code to http://codepen.io/ or http://jsbin.com/welcome/1/edit...
That way we can have a look at css and html side by side or even you can now use the workspace provided by treehouse and share the link. This way we will also be able to give you a better explaination. cheers
Natalie E
1,897 PointsHere's the code and output. For some reason on this site it shows up the same as in the video. http://jsbin.com/neyukika/2/edit
Natalie E
1,897 PointsThanks :)
Natalie E
1,897 PointsSo, the footer is in the right place, but the last image is supposed to end up on the left side and mine is showing up lined up to the right.