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

Question

I am looking for a way to create a

of items that I can put within a
and have them show up side-by-side and wrap to the next

Answer 1

I would recommend that you use display: inline;. float is screwed up in IE. Here is an example of how I would approach it:

  
item 1

  
item 2

  
item 3

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;
}