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


Understanding CSS floats

I'm having a really difficult time understanding floats after watching this video on CSS floats. I follow why the float was given 'left' to the image, but I don't understand why the H4 and the P tag were also given a 'float: left'. Can anybody explain this to me like I'm a 4 year old? I'd appreciate it. Thanks!

3 Answers

James Barnett
James Barnett
39,199 Points

Check out the section on floats in Shay Howe's online CSS guide and then check out the sections on floats on learnlayout.com.

Then try and re-create this using floats:

Piet Mondrian - Composition II in Red, Blue, and Yellow - 1930

Source: Piet Mondrian Composition II

After that try and complete this exercise

Hi James,

I really appreciate the response. What I don't understand is why 'float: left' was chosen for the other elements. The only thing I can think of is that since we only have three options for float (four counting 'none'), 'left' was chosen because we didn't want it to float to the right or have it inherit something else. What I'm wondering is why float was chosen. In learnlayout's example, none of the examples use float on any other element except for what's getting floated to begin with.

If I saw something was doglegging against something I'm floating, my first thought wouldn't be that it, too, needed to float. So I'm obviously missing a key concept here that must be happening. Worse, when both the H4 and the P tag have 'float: left' applied, it doesn't end up creating a 3 column layout, so I'm really confused about what's happening here.

I hope this makes sense. Thanks!

I'm in a similar situation.

+1 for learnlayout.com also checkout http://learn.shayhowe.com

James Barnett
James Barnett
39,199 Points

Aaron Ackerman - Great minds think alike, shay how's guide was the one I linked to :smile: