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!
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
Issues with Clearfix Hack & Floating
I guess I need another pair of eyes for this one.
I'm trying to float the text to the right of the YouTube video. I've included the clearfix hack in my CSS code, and given the containing div, with the class ".welcomeclip" the additional class of "group". Yet every time I try to float the text to the right, it kinda just shifts down the page a little.
I've stared at my CSS code and my HTML for a while now and I can't see the problem. Is there something I'm doing wrong here?
Ryan Hemrick12,759 Points
I am not 100% sure what the class name is for the larger paragraph or if there are additional styles that are cascaded down that I can't see. But there are two possible solutions that might work for you:
You will have to set a width for the paragraph text. Floating it will not automatically adjust the size of the paragraph (width). If you specify a width that fits alongside the video trailer, then they will sit beside one another.
Also, you can set a
box-sizing: border-box; property on the video trailer. Because when you float images next to eachother it is dependent on the width of the floated elements, the border property sometimes throws people off. By setting the box-sizing property to border-box, the border styles are included in the width of the element and are not just added on.
Not sure if this will be too helpful. But hopefully it is!
I had a similar problem. Ryan nailed it, you need to set widths on the floated elements and also the parent element or container. I found that using background colors instead of borders was a big help.