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

Lukas Muller
Lukas Muller
7,347 Points

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

I do not exactly get why "width: 45%" turns the list into a two column area. Why are two boxes beside one another? Couldn't it also be possible that there is just one box with too much space around it and the second box is under it? Why exactly is it a two-column list now?

And when I'd remove the float: left, it would turn into such a beneath-one-another list.

So can anyone please explain why this results as a two-column list?

4 Answers

Roy Penrod
Roy Penrod
19,810 Points

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").

Hi, Could you please tell me, why removing "float: left;" and setting "display: inline-block" does not make it a 2 column layout?

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).