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
Phylicia Campbell
2,402 PointsHello, So instead of using 'clear: both', I simply made the width: 100% for the .guestlist media query and got the same
I got the same result. I am not sure why both ways worked though? is there anyone who possibly can explain?
2 Answers
Steven Parker
231,271 PointsWith a width of 100%, the element needs an entire line for itself, so it must be placed clear of any floats.
That's a clever but very unconventional alternative to the common practice of using the "clear" property.
Russell Rice
Front End Web Development Techdegree Graduate 15,783 PointsSo instead of using 'clear: both', I deleted the float left and made it display: inline-block; for the h2 under @media (min-width: 769px) and got the same result
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 PointsSeokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 PointsHi there, I tried in a different way. When I was inspecting, there were two floating elements, 'h2'(left) and 'label'(right) on the top of the 'ul'. And it seemed that the unordered list is stuck between those two floating elements because there was not enough top-margin given. So I tried to give more top margin to the 'ul' element, to make it escape from between those two, and it worked.
.guest-list { list-style-type: none; padding: 0; margin: 2em 0 1em; -> margin: 4em 0 1em;
I changed the margin-top 2em to 4em, and it worked almost the same except a tiny more space on the top of the list due to the extended top margin. However, as being said, is it also the unconventional alternative in your perspective?
Thank you so much for your time Steven. Have a nice day!
Steven Parker
231,271 PointsSteven Parker
231,271 PointsAll of the approaches mentioned here are very situation-dependent, so if changes are made to the layout they may stop working.
While experimentation is very useful for understanding, for production work the conventional "clear" method is recommended to keep the code from becoming "brittle".