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

Oliver Fajardo
Oliver Fajardo
2,853 Points
Posted by Oliver Fajardo
Oliver Fajardo
2,853 Points

Don't understand float concept

Hello Treehouse Community, I'm in the CSS foundations track and am learning more about floats.

I'm stuck on a particular part when they say to insert float: left; in the paragraph, but it moves to the right instead. I don't get the logic there. Can someone assist me?

I have the link to the video lesson where they demonstrate this. The time starts at 4:10 and ends at 4:50. http://teamtreehouse.com/library/css-foundations/the-box-model/floats-2

Thank you,

Oliver

**MY BAD, I thought I had posted the link

Mike Baxter
Mike Baxter
4,442 Points
Mike Baxter
Mike Baxter
4,442 Points

Which video is it? (In the future, if you're watching a video and you have a question, you can look to the right of the video and find the button to post a question to the forums, which auto-links the video you were on so others can help you more easily). :)

2 Answers

Philip Cox
Philip Cox
14,818 Points
Philip Cox
Philip Cox
14,818 Points

Hi Oliver. Try to imagine each element you place into an html page as a square. And each square likes to rest nicely beside each other starting at the top left, they will align side by side until they run out of width space. Then they will move below the first row and start again. But, a block level element will take up the entire width even if visually it renders only half the page, the rest of the block is there, you just can't see it. Float, will take the element you assign it to, and float it above all other elements, taking it out the pages natural flow. It will literally float above the rest, unless you float ever element, then they will go back into flow, but be floated. floating adds padding so they will seem bigger. Another element must be pushing your other element over to the right. Try setting the width of elements to 100% so they take up all space and flow below one another, this may help you understand where your elements are trying to go.

:)

Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points
Cesar Vanbuskirk
Cesar Vanbuskirk
6,672 Points

Try clear:both; after the float, maybe that'll work