Mixing number of products per row on a page

[leehack]

I don't think it's a set pattern he will have Jonty, he wants the ability for it to be flexible. Can't quite see how listindex would work, if he starts with 2 wide then goes 1 wide on next row or vice versa, wouldn't list index be useless. Listindex is great when you want to alternate for odd and even, can't see how it can be assigned to anything in this case, you got some clever trickery up your sleeve?

[jont]

I was assuming a fixed layout to have say a feature product as the 3rd item at fixed width.

For the CSS you can use something like :

<div class="productWRAPblockif((ListInxdex == 3))1/block">

.productWRAP {width:50%;}
.productWRAP1 {width:100%:}

[mash]

Thanks for the feedback on this, so to recap:

I will have to set up 2 new product layout using CSS, (one full width (FL), one half (HL)), then set up a new product list layout. Apply product list layout and the dominate product layout to the various section which need this layout.

Then signing full layout to the products which I want a single product per line (assuming two products are standard) and you should get this:

Product A (HL) Product B (HL)
Product C (HL) Product D (HL)
Product E (FL)
Product F (HL) Product G (HL)
Product H (HL) Product I (HL)

Deleting, I guess removing product E would not have an impact on the layout, but say F and you would get some thing like this:

Product A (HL) Product B (HL)
Product C (HL) Product D (HL)
Product E (FL)
Product G (HL) Product H (HL)
Product I (HL)

Which could cause a problem if the products were paired up, they would be out of sequence (like a refill for the main product).

So you would have to do this:

Product A (HL) Product B (HL)
Product C (HL) Product D (HL)
Product E (FL)
Product G (FL)
Product H (HL) Product I (HL)

Are there any other pitfalls? I am assuming that the old product list and layouts can stay for other parts of the site which is not affected by this layout.

I can see why Andy found other stuff to do!!

Thanks Mash

[leehack]

You can have as many new product list layouts, section list layouts or products layouts as you need and use them wherever you like without affecting anything else. Your main points are:

1. Scrap the table based list layout a simple <div> </div> is all you need
2. Then work out your space to assign widths to the 2 layouts
3. Use internal padding to space things out instead of margins (IMO)
4. Remember how the width of a container is calculated bearing in mind all the styling elements in the mix, i.e. if the area is 600 wide, you do not set the 2 wide layouts to be 300 wide, must calculate your widths carefully and correctly

[jont]

[*]Use internal padding to space things out instead of margins (IMO)

Yep - I always use a containing <div> with no padding or margin when floating to ensure it is pixel perfect over all browsers ... and space is added to the elements contained within

[mash]

Thanks, I will tackle this and let you know how I get on, the way my week has started, it won't be until the new year.

Thanks again M