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

CSS

Posted by sakatagintoki
sakatagintoki
12,624 Points

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
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!

sakatagintoki
sakatagintoki
12,624 Points

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.

sakatagintoki
sakatagintoki
12,624 Points

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.

rays0
rays0
16,293 Points
rays0
rays0
16,293 Points

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.