Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Debugging Styles Solution

Hello, 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
Steven Parker
216,083 Points

With 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.

Seokhyun Wie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,594 Points

Hi 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
Steven Parker
216,083 Points

All 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".

Russell Rice
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Russell Rice
Front End Web Development Techdegree Graduate 15,783 Points

So 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