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

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: