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

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?

Thx ~Jay

2 Answers

Ryan Hemrick
Ryan Hemrick
12,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!

Paragraph doesn't have a class name, and there weren't any additional styles related to the divs in question.

I think I've tried tinkering with the widths before but I completely forgot to do this this morning. I might have already set the box-sizing to border-box but I will go back and check.

Your suggestions sound plausible though, thanks. Will have another go.

I tip my fedora to you goodsir.

DERP. Yes, of course. I tried setting the width of the paragraph to 75% but found it went funny when I resized the browser. I assumed the divs were collapsing, but I just need to adjust the width with media queries for when the viewport is muchs smaller. Fail.

Thx for halps.

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.