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
mattlebl
10,849 PointsPlease explain floats in more detail...
Hi there, Nick mentioned that "floated" elements are like images in print, and that text would wrap around it, but that's about where my understanding of float ends. How come you specify left, right, etc.? How does that affect things?
Thanks so much!
2 Answers
Adam Duffield
30,494 PointsImagine you have a box thats 50px wide. The box contains both an image and some text after it, the image is 3px wide. Normally the image will appear in this box 1st and then the text on the line below it. If you float the image to the left that means that any available space the right of the image will be filled by the next element (if it can fit). In this case the text does fit so it will "wrap around the image by appearing on the right hand side, give it a go in a text editor. :)
In terms of blocks and positioning Imagine you have 3 divs with different background colors and 2 of them are 40px wide and 1 is 30px wide. For the purpose of example lets say your screen is 100px wide. Baring in mind that floating works in what order you put things 1st, so lets say your 2 40px div's were written 1st before your 30px div. float all 3 divs to the left and you'll find that the 2 40px floats are above the 30px float with a little bit of space to spare.
If you was to change your 1 30px float to a 20px float they would all float on the same line due to the maths of the elements fitting inside the max width. 100px total width and 2 40px's div's inside and now 1 20px div(before was a 30). Hope this is all making sense!
For more really useful detail on floats try the CSS float layouts course, its really helped me get out of the same situation your in now! :)
Regards,
Adam
James Barnett
39,199 PointsMost people new to CSS find floats confusing.
Floats will be covered in more depth in later courses in particular there's a whole badge dedicated to using floats in the new CSS Layout Techniques course.