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
PUC Treehouse
7,021 PointsI don't know where to use 'clear: both' element after I used float element.
// Style .aboutContent { width: 85%; height: auto; margin: 0 auto; padding: 0; list-style: none; }
.aboutContent li { display: inline-block; float: left; color: #a4b3cd; text-align: left; font-size: 60%; padding: 5% 0; }
.aboutContent li:nth-child(even) { width: 70%; }
.aboutContent li:nth-child(odd) { width: 30%; }
footer { background-color: #202532 ; text-align: center; font-size: 50%; padding: 5%; color: #515b6b; }
// Html <section class="clearfix sectionAbout"> <h3>About</h3> <ul class="aboutContent"> <li>Profile: </li> <li> <p>HelloWorld</p> </li> <li>Contact: </li> <li> <p>info@gmail.com</p> <p><a class="fb" href="www.facebook.com">Facebook</a></p> </li> </ul> </section> <footer class="clearfix"> <p>© 2015</p> </footer>
5 Answers
Adam Greenough
7,742 PointsI'd put it after the unordered list, before the footer.
sizwengubane
15,244 PointsHmm listen bro, floats are used to take an element out of its normal document flow and place it somewhere else.
Because the element is OUT of its normal document flow when floated, the elements after the floated element will start to wrap around it. thats just the normal behaviour of floats. The clear property is used to control the behavior of floating elements so that the elements after the floated element will no longer wrap around it.
So in this case u have floated ur list items inside the unordered list, as a result ur footer wraps around it
using "clear:both;" in the footer will solve this problem
thanks
PUC Treehouse
7,021 Pointsthanks bro, this works. But the point is i want to set background color to the section and appear to all element inside it. If i don't use float element, it's works. But when i use float element inside the unordered list, the section background will no longer wrap around it. so can you please tell me what should i do?
PUC Treehouse
7,021 PointsPls check my code here:
https://jsfiddle.net/g8z3afcq/6/
I want the blue background wrap all element including unordered list.
Adam Greenough
7,742 PointsI'd put it after the unordered list, before the footer.
Adam Greenough
7,742 PointsI'd put it after the unordered list, before the footer.
sizwengubane
15,244 PointsInstead of applying a background color for the section...apply a background for the wrapper ID that will solve ur problem thanks
PUC Treehouse
7,021 PointsPUC Treehouse
7,021 Points// // // //
<section class="clearfix sectionAbout"> <h3>About</h3> <ul class="aboutContent clearfix"> <li>Profile: </li> <li> <p>Hello World</p> </li> <li>Contact: </li> <li> <p>info@gmail.com</p> <p><a class="fb" href="www.facebook.com">Facebook</a></p> </li> </ul> </section> <footer class="clearfix"> <p>© 2015,</p> </footer>
I have put it but it still not work. It's look like the section parent don't give auto height to child.
PUC Treehouse
7,021 PointsPUC Treehouse
7,021 PointsPls check my code here:
https://jsfiddle.net/g8z3afcq/6/
I want the blue background wrap all element including unordered list.