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
Harry Brooksbank
844 PointsHow does clear: both; for the footer element still apply when the float: left; for #gallery comes later on in the code?
My understanding of the cascading nature of CSS is that it would override this declaration. eg: you have:
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
and then much later on you have:
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5"; color: #bdc3c7; }
2 Answers
Harry Brooksbank
844 PointsThanks for the quick response.
You've helped me figure it out. Do I understand it correctly in that:
It may come first in the CSS, but as the footer element is further down in the HTML code, the new rule (clear) overrides the rule to float the footer next to one of the gallery pictures?
Simon Coates
28,694 PointsFloating and clearing don't conflict. They work in concert. The list items float. The footer clears anything floated in it's parent container. (I apologise for the brevity of my comments. They may seem unhelpful. But CSS is horribly complicated to talk about. )
Harry Brooksbank
844 PointsThat's fantastic, you've cleared it up perfectly for me. Thanks so much!
Simon Coates
28,694 PointsSimon Coates
28,694 PointsThose styles are completely unrelated. They don't interact.