Present product list in columns (2)

[Mighty]

Hallo Everyone,

I am new to Prestashop and I am trying to understand how templates are built up. I managed to come a long way but I am facing a little problem with the product list presentation.

In standard Prestashop template products are presented in rows. Each row containing 1 product. I would like to change this and present two products per row. Below I will add my css, only parts concerning the #center_column and Product_list:

#center_column {
width: /*710px!!!!!!!*/740px;
margin: 0 0 30px -15px;
overflow: hidden
}

--------------------------------

/* product-list.tpl */
ul#product_list { margin-top: 2em; list-style-type: none }
ul#product_list li {
background: #FFFFFF/*d0d3d8 url('../img/block_category_item_bg.jpg') repeat-x*/;
border: solid 1px #d0d3d8;
padding: /*6px*/3px;
/*min-height: 130px;*/
/*height: auto;*/
clear: both;
margin-bottom: 0.3em

/***************Added by Mo to chnage the product list view to grid******************/

float: left;
width: /*22%*/48%;
height: auto;
margin-right: /*8px*/4px;
clear: none;

/**********************************END************************************/

}
* html ul#product_list li {
height: auto !important;
height: 130px
}
ul#product_list li a {
text-decoration: none;
color: #374853
}
ul#product_list a.product_img_link {
/*border: solid 1px #d0d3d8;*/
float: left;
margin-right: 0.6em
}
ul#product_list a.product_img_link img { vertical-align: bottom; display:block}
ul#product_list li h3 { margin: 0.4em 0 }
ul#product_list li .new {
background: transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border: 1px solid #488C40;
color: white;
font-size: 0.6em;
font-weight: bold;
margin: 0 1em 0 0;
padding: 0 0.4em;
text-transform: uppercase;
vertical-align: 0.3em
}
ul#product_list li p.product_desc {
margin-bottom: 0;
font-size: 0.92em
}
ul#product_list li div.center_block {
float: left;
width: /*74%*/100%;
}
ul#product_list li div.right_block {
float: /*left*/right;
width: 11em;
text-align: right;
margin-left: 1em;
margin-top: /*0*/5px;

}
ul#product_list li .discount {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .on_sale {
color: #da0f00;
text-transform: uppercase;
font-weight: bold;
display: block
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em
}
ul#product_list li .price {
display: block;
font-size: 1.5em;
margin-bottom: 0.2em
}
ul#product_list li span.availability {
color: #488c40;
font-size: 0.9em
}
ul#product_list li a.button { margin-top: 0.5em }

My product list looks like depicted in the image.

Can you help?

Thanks.

Mooo

[Mighty]

Please provide me something so I can go on with this.
This small thing is quite frustarting...

[FRANCISPOH]

maybe u can go
http://www.prestashop.com/forums/viewthread/99248/integration/change_subcategory_view_to_grids_instead_of_list_v1_dot_4

and see if you need this.

[sakrafanas]

remove clear:both

and add:

float:left;