ShopSite Forums

Has anyone dealt with a fluid layout and looping the products?
I have a fluid layout, how can I tell shopsite to add columns based on how wide the layout is and have all of the td's equal in height for each row depending on the height of the tallest?
I'm still looking for a solution if anyone could help me out... Thanks

For a fluid layout where you don't know how wide the page will be, I would suggest using DIVs rather than a table structure. You can loop the products in DIVs where you specify the height and width, and float all the divs to the side. As the page gets wider, more products will be displayed per row. The template/code structure would be similar to the following.

In your CSS file:
div.product {
width: 180px;
height: 200px;
float: left;
overflow: hidden;
clear: none;
padding: 0px;
margin: 0px 10px 10px 0px;
text-align: center;
}

In your PAGE template:
[-- LOOP PRODUCTS --]
[-- PRODUCT --]
[-- END_LOOP PRODUCTS --]

In your PRODUCT template:
[-- DEFINE PRODUCT --]
<div class="product">
[-- PRODUCT.Graphic --]
<br>[-- PRODUCT.Name --]
<br>[-- PRODUCT.Price --]
<br><a href="[-- PRODUCT.AddToCartURL --]">Add To Cart</a>
</div>
[-- END_DEFINE PRODUCT --]

Thanks Lauren,

That sounds like a solution. Having all the DIVs the same height and width will just be a better solution rather than trying to make them all equal per row, which i guess will get into using js. But i'm not sure how that will work out having to run js every time the window is re-sized. I'll have to figure out a way to rearrange or fill the blank spaces some of the products will have from not having an on sale tag, product description, etc. Any other inputs would be great if you have any other thoughts. Thanks a ton!

I would setup your product DIVs so that the height is the standard height for the tallest product (maybe not THE tallest if the tallest is more of an odd-man-out). What I often do is have each section in a span, a, or another div that I can control. A typical layout is graphic, name, price, description, add, in descending order. So with that setup, I would setup IF/END_IF tags in the template so that if the product more information page is turned on, then the graphic and the name have a hyperlink with a class around them. I can control the height of that hyperlink by making it a block (display: block;) and setting dimensions. that way if a graphic is way too large, or if the product name is way too long, the additional text or image is hidden...it won't go bigger than what I set for the hyperlink. If there is no more information page turned on, then I use a span and give that the same class. I use the resize image feature in ShopSite, so I can expect a certain size image so the image block isn't really a problem. With product names, I typically set it up so that there can be 2 lines of name text, and the rest overflows and is hidden. I do the same for the product description. I put the description in a div or a span, make the text smaller, and only allow 3 - 5 lines depending on the layout. For the product price, I give the span enough space to always have room for the product sale price. That way, if a product with a sale price is next to a product without a sale price, the add to cart buttons will still line up, there will just be an empty line where the sale price would be if the product without a sale price had a sale price.

You know what, you are pretty awesome. I was thinking of doing all of what you said and i'm glad you replied, which gave me some reassurance. Thank you again.