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
jonm
6,795 PointsUnderstanding 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
39,199 PointsCheck 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:
Source: Piet Mondrian Composition II
After that try and complete this exercise
Daniel Gilligan
1,369 PointsI'm in a similar situation.
agreatdaytocode
24,757 Points+1 for learnlayout.com also checkout http://learn.shayhowe.com
James Barnett
39,199 PointsAaron Ackerman - Great minds think alike, shay how's guide was the one I linked to
jonm
6,795 Pointsjonm
6,795 PointsHi 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!