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

Question

I am looking for a way to create a  lt ul gt  of items that I can put within a  lt div gt  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  lt li gt  s I want as far as the size  color  content  etc   I am just having trouble with the wrapping clearing etc  part

User · Answer

Use the following code to float the items and make sure they are displayed inline.

ul.myclass li{float:left;display:inline}

Also make sure that the container you put them in is floated with width 100% or some other technique to ensure the floated items are contained within it and following items below it.

User · Answer

I would recommend that you use display  inline   float is screwed up in IE  Here is an example of how I would approach it    lt ul class  side-by-side  gt     lt li gt item 1 lt li gt     lt li gt item 2 lt li gt     lt li gt item 3 lt li gt   lt  ul gt    and here s the css    side-by-side     width  100     border  1px solid black      side-by-side li     display  inline      Also  if you use floats the ul will not wrap around the li s and will instead have a hight of 0 in this example    side-by-side li     float  left

User · Answer

This can be a pure CSS solution   Given    lt ul class  tileMe  gt       lt li gt item 1 lt li gt       lt li gt item 2 lt li gt       lt li gt item 3 lt li gt   lt  ul gt    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    lt li gt  lt a class  tile  href  home  gt item 1 lt  a gt  lt  li gt    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

User · Answer

I used a combination of the above to achieve a working result  Change float to Left and display Block the li itself HTML    lt ol class  foo  gt       lt li gt bar1 lt  li gt       lt li gt bar2 lt  li gt   lt  ol gt    CSS    foo li       display  block      float  left      width  100px      height  100px      border  1px solid black      margin  2px

User · Answer

add this line in your css file    classname ul li       float  left

User · Answer

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

User · Answer

Here s a good resource for wrapping columned lists   http   www communitymx com content article cfm cid 27f87

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

Examples related to css