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
Adam Akers
7,357 PointsAlignments with floats
I am on the "Floats" video of "The Box Model" stage. Something that is bugging me is the use of float twice, first for the image (which I totally understand what it does and why it was used), but the second time in the <p> tag it is also used. While I see what it does to the paragraph, aligning it so it does not wrap around the image, I would like to know why. Does using the float left set up some sort of barrier? Codepen link below:
1 Answer
Chris Shaw
26,676 PointsHi Adam,
The below is quoted from the Mozilla Developer Network float documentation.
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.
Essentially anytime you have two floats next to each other they cancel one-another out causing a sort of inline-block effect whereas a single float causes the element it's applied on to become partially disconnected from the normal page flow allowing other child elements to simply align above, below and around it.
Adam Akers
7,357 PointsAdam Akers
7,357 PointsAwesome! Exactly what I was looking for. Thanks Chris!