Why exactly does 45% width make this two-column list & what does left-floating do here?

Hey, Lukas. Let's take this one step at a time.

Every html element that appears on the page has a default display property that describes how it displays within the flow of the html document.

A div element, for example, has a default display property of block. That means that it takes up a whole row within the document flow.

An anchor element has a default display property of inline. That means it doesn't take up a whole row within the document flow. It appears inline with whatever is surrounding it.

So that's why you get the over and under effect when you remove the float. It's two elements with a display property of block stacking on top of each other, taking up their own rows.

Setting an element to float takes the element out of the normal document flow and sends it to the left side or the right side of the container where text and inline elements will wrap around it.

The reason you get the two column layout is because both elements have a display property of block. Block elements don't wrap around floats. Instead, they appear one after the other on the same row. Think of the container as an index cards and the content inside it as the writing on the index card.

The width of 45% just sets the width of the block element. 45% gives you a little space between the elements (designers call that space a "gutter").

The width: 45%; equals 2 columns 45% and 45%, that's 90% plus another 10% margin. And it needs the float: left; to pull the top list item over to the left so they can sit next to each other. That's why when the float: left; is removed the list items stack one on top of another. So the float: left; and width: 45%: element end up working together.

Hope this helps Jeremy Franklin

This is because the <li> have the property "display: block" default, then take all possible wide. When you put the float property to any html element, this leaves the normal flow of the page and go to the left or right depending on how you place it.

In short, if you take away the "float: left" take ownership "display: block" and placed one under the other, but if you leave, some were placed next to the other.

The intent here is to style the gallery in a way that deviates from the normal flow of block elements. The 45% is an arbitrary percentage set for each image in the gallery. The "wrapper" container is set to a max-width of 940px; think of this as 100%.

Utilizing {float: left} the second image will flow to the same line as the first image because of the available space on that line. Those two images make 90% of the width on that line of the parent container. Adding margin in between the two images will give a more aesthetic display of the gallery. There is 10% container space to be filled. 10% / 4 = 2.5% (of margin applied to the right and left side of the image).