Display items in a grid

I'm having a tough time figuring out how to display products in floated tiles instead of a list.  I've created a few products and I've dragged a products list widget on to my template.  I'd like to know how to make it display like floating tiles instead of the ugly list.  I thought this would be a relatively easy maneuver but I haven't seen any simple explanations of how to do this.

Hey Tyler,

I'm not entirely sure what you mean with 'floated tiles' vs 'ugly list'. By default the product list widget displays 20 thumbnails on 5 row of 4 products.

If you want to change how the products are displayed, you can simply click on edit, go to the 2nd tab of the widget (List settings) and near the bottom click on 'Edit selected template'.

This will open the (code)editor where you can complete change the look and remove the <ul>/<li> to whatever you'd like more.

Jochem.

This is indeed puzzling.  All of the products that I'm displaying show in one column.  I have a hunch that the way I've structured my page (built outside of sitefinity with html/css) has modified the way things display in it. My attachment should illustrate what I'm talking about.  Using firebug, as I highlight the products container, it extends all the way to the right and stops flush with the above header and menu.  I'm using a 960 grid system, is it possible this is my problem because it could be pushing each object into its own row?

thanks for your help

Hey Tyler,

The problem (by the looks of it) is indeed the <li> tags, because they are showing. The 960 grid system itself shouldn't be a problem. But it probably has some general reset style rules regarding <ul>/<li>. 

If that's not it, if you could tell me which grid system it is, we can perhaps figure it out better...
Jochem