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

tarkonis
tarkonis
1,036 Points
Posted by tarkonis
tarkonis
1,036 Points

I dont understand what makes the images stack in two columns.

How does Float: Left make the images stack? I'm not understanding the explanation given in the video. We have 5 images, when we float them left they stack three then two?

Why don't they all float to the left?

tarkonis
tarkonis
1,036 Points
tarkonis
tarkonis
1,036 Points

Is it because, if a third li was to float left of the second li, it would break out of its parent element and therefore falls below?

2 Answers

Curtis Murley
Curtis Murley
2,766 Points
Curtis Murley
Curtis Murley
2,766 Points

After adding margins and padding and all that fun stuff each element is given about 50% of the pages width. 50% +50% = 100% and therefore the following item floats to the left of the page below it

Imagine by default all items are stacked top-to-bottom of one another. . .

[1]

[2]

[3]

. . . float left is telling the items to rest side-by-side one another starting from the left. . .

[1][2][3]

. . . if there is no more screen space to take up items will go below but still float to the left side of the page . . .

[1][2][3]

[4]

tarkonis
tarkonis
1,036 Points
tarkonis
tarkonis
1,036 Points

Thanks Curtis for your explanation. I think the video could have done with some more in depth explanation of floats. After reading your answer I understand it now.

In the context of the video example though, what is the parent element that the items are floating inside? is it the wrapper div?

Thanks again!

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Correct. Floated children are contained to the width of their parent. If the total width of all the children is wider than it's parent, they break to a new line.

If you look at the code, Nick's

#gallery li {
 float: left;
width: 45%;
margin: 2.5%
}

says, we have margin 2.5% of the page width all around. Well, width of the child is 45% + 2.5% +2.5% = 50%. And 50% +50% equal 100%, so two children elements are exactly as wide as the parent, so two sit side by side, the remaining floating children fall down to the next line and repeat.

If the total of the children was any more than 100%, only one child would be on each line, and if it was less, you'd still only have two children per line until a 3rd child could fully be contained within the width of the parent.

tarkonis
tarkonis
1,036 Points
tarkonis
tarkonis
1,036 Points

Thanks kevin that's a great explanation.