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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Kathryn Williamson
Kathryn Williamson
2,011 Points

Why do two images go side by side in the gallery when using the float property?

I understand the concept of the float property but I don't understand why just 2 images go side by side. He says that if one uses float then the elements appear side by side. Why wouldn't all the images appear side by side after using this property, why just 2?

2 Answers

David Finley
David Finley
18,742 Points

When you take elements out of the normal document flow using floats, they will stack next to each other until there is no more horizontal space which then they will wrap to the next line.

I believe in this project you declared that the images would take up 45% of the screen width with 2.5 margins on both sides. So two images are set to take up 100% of the screen and then the next images have to move to the next line.

From 28% - 21%, you'll get 3 images. From 20% - 16%, you'll get 4 images. From 15% - 14%, you'll get 5 images. From 15% & down, you'll get 5 images and the facebook & twitter logos.

Matthias NΓΆrr
Matthias NΓΆrr
8,614 Points

Thank you David Finley and Tieryel Northwind, this gave me an idea of what the float property acually does.