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

Konstantin Shabanov
Konstantin Shabanov
3,505 Points

Need a help with floats!

Hey guys! I'm practicing floats on my own and there is definitely something wrong with my boxes when I shrink it, because at some point box 3 just getting taller (it is not noticeable if you widen or shrink it fast but I would like to know solution for that...)

HTML <div class="container clearfix"> <div class="box left"> <h1>BOX ONE</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel aliquid velit molestiae, aut nobis porro harum veniam ipsam similique vitae possimus laboriosam? Possimus quae delectus aspernatur, eius quas nesciunt ratione?</p> </div> <div class="box left"> <h1>BOX TWO</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel aliquid velit molestiae, aut nobis porro harum veniam ipsam similique vitae possimus laboriosam? Possimus quae delectus aspernatur, eius quas nesciunt ratione?</p> </div> <div class="box left"> <h1>BOX THREE</h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel aliquid velit molestiae, aut nobis porro harum veniam ipsam similique vitae possimus laboriosam? Possimus quae delectus aspernatur, eius quas nesciunt ratione?</p> </div> </div>

CSS

  • { margin: 0; padding: 0; box-sizing: border-box; }

.box { border: 5px solid red; background-color: aqua; width: 33.3333%; padding: 10px; text-align: center; }

.left { float: left; }

.clearfix::after { content: ''; display: table; clear: both; }

Even though, I've tried to add border box to universal selector still it was not calculating itself.. I had to use calc or make it more precisely. Please anyone who can test it let me know what is the problem Thanks!

1 Answer

Adam Pengh
Adam Pengh
29,880 Points

The uneven heights is due to the "Box Three" text wrapping. Floats don't really allow for columns being equal height. The old-school way of doing this is to use display: table; on the parent and display: table-cell; on the children: https://www.w3schools.com/howto/howto_css_equal_height.asp. I created a codepen to demonstrate using that technique. https://codepen.io/adampengh/pen/rqXQLQ

If you haven't yet learned about flexbox, I would recommend taking one of the courses. https://codepen.io/adampengh/pen/YJmRQq

Konstantin Shabanov
Konstantin Shabanov
3,505 Points

Many thanks to you Adam for thoroughly explaining that moment and for providing sources! I just tried that technique it didn't help out however flexbox fixing the issue. Floats kind of headache... I just want to make sure that I understand them even though it is old stuff..

Konstantin Shabanov
Konstantin Shabanov
3,505 Points

Hey Adam, I figured out how to fix that problem! Basically I just made a different font size and overlap just disappeared. Thanks for your contribution into my development xD. For now it works perfectly with flex as well as table property!