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
Annie Lu
5,138 PointsQuestion about float: left
In this section, Nick applied float to the list element,
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
why the footer image also affected? In index.html, footer is not within the list element.
EDIT: I changed your code so it appears properly . Press on EDIT and see what I did to achieve this effect.
4 Answers
Rich Bagley
25,869 PointsHi Annie,
This is really useful article which explains how the floats and clears work:
http://css-tricks.com/all-about-floats/
Your particular issue can be found under the heading Clearing the Float.
Hope that helps!
-Rich
Rudy Tan
Courses Plus Student 16,635 PointsI think you need to apply clear: left or clear: both afterwards. It is to clear the floating element.
Hernan Martin Demczuk
1,264 PointsBecause each li element has the float property the rest of the elements that don't have it will behave as they should: postioning on the right of those that have been specified to be on the left.
*: I'm actually watching those videos too and I realize that there are some things that I don't understand at first but in the following videos the concepts makes much more sense as you go depeer. In this case float is explained better in the two next videos.
Hope that helps!
Annie Lu
5,138 PointsThanks for the editing. I saw it.
Nick did say that need to apply clear: both to the footer to fix it in the video. But my question is, why? Why it got affected at the first place? The float is only applied to "gallery li" element in css, it didn't apply to footer. Why did the footer got affected?