Side-by-side list items as icons within a div (css)

Question

I am looking for a way to create a <ul> of items that I can put within a <div> and have them show up side-by-side and wrap to the next line as the browser window is resized.

For example, if we have 10 items in the list that currently show 5 items on the first row and 5 items on the second row, as the user makes the browser window wider, it turns into 6 items on the first row and 4 items on the second row, etc.

I am looking for similar functionality to what Windows Explorer does when in tiles/icons/thumbnails view. I am able to create the <li>'s I want as far as the size, color, content, etc. I am just having trouble with the wrapping/clearing/etc. part.

Answer 1

Give the <li> float: left (or right)

They will all be in the same line until there will be no more room in the container (your case, a <ul>). (forgot): If you have a block element after the floating elements, he will also stick to them, unless you give him a clear: both;, OR put an empty div before it with clear: both;

Answer 2

This can be a pure CSS solution. Given:

<ul class="tileMe">     <li>item 1<li>     <li>item 2<li>     <li>item 3<li> </ul> 

The CSS would be:

.tileMe li {     display: inline;     float: left; } 

Now, since you've changed the display mode from 'block' (implied) to 'inline', any padding, margin, width, or height styles you applied to li elements will not work. You need to nest a block-level element inside the li:

<li><a class="tile" href="home">item 1</a></li> 

and add the following CSS:

.tile a {     display: block;     padding: 10px;     border: 1px solid red;     margin-right: 5px; } 

The key concept behind this solution is that you are changing the display style of the li to 'inline', and nesting a block-level element inside to achieve the consistent tiling effect.