Spacing and alignment of products in columns

I downloaded the mod to be able to list products in columns instead of just rows and it appears to work except I think I need some spacing or something to make these easier to read. You can check it out here as I am in the process of making this site but here is what it looks like:

http://www.pagebypaigescrapbooks.com/index.php?main_page=index&cPath=2_11

The products that take up more room than others come close to the one below it (like the first two columns here) and I think it is too close to the add to cart button. How can I either put more space in between them or align them so that all the add to cart buttons are in a straight line? Let me know what you think would look best.

On a side note, how do I get the additional images either closer together, left aligned, or something as long as they are all in a straight line and not like this:

http://www.pagebypaigescrapbooks.com/index.php?main_page=product_info&cPath=2_11&products_id=5

Thank you in advance

installing the Image Handler2 mod will allow you to pad-out your images so the rows and cols are nice and neat.

I did install that and while it worked for uploading, they did not show up unless I uninstalled it. I searched the posts and found the same problem and the only solution I found for it was to upload images with it, then uninstall it everytime when you are done. Is that the only way?

By the way, I assume this response is to my second question, right?

I was talking about the first question.

Things are out of line because the images are different heights. Not exactly sure about your previous problem with IH2, but it does have a setting to force the images to a consistant height without distorting them. That will fix that problem.

Try adding below to bottom of your stylesheet to fix second problem.

#productAdditionalImages{clear:both;}

These added to your stylesheet will start you on the path for the listing grid:

.centerBoxContentsProducts {
    height: 200px; 
    border-bottom: 1px solid #bbbbbb; 
    margin-bottom: 1em; 
    position: relative;
    }

.centerBoxContentsProducts br+a {/* an "a" following a "br" at same level */
    margin-left: -2.1em; /*adjust to half of element width*/
    position: absolute; 
    bottom: 1em; 
    left:50%;
    }

You will have to make the listings a fixed height (more than any possible content height) for this to work. With uniform kinds of content, this should be practical.

Thank you so much. I like having that line there, that makes a nice separation. I will try to mess around with it a little more. So I guess the key is the make the images all the same height? Even if I did that though, it still would be lower if the title is long enough that it takes up two lines of text. Maybe I'll give Image Handler another try to see if I can get those images all the same size.

Actually, the code I posted makes the overall product a fixed height, so you don't need to worry about making the images fixed. If there was no chance of the titles being too long and wrapping, I would suggest to get the formatting with a fixed image height.

gjh42:

If there was no chance of the titles being too long and wrapping, I would suggest to get the formatting with a fixed image height.

I'm not exactly sure what you mean by this.

So I notice that while they are a fixed height, they are aligned at the top. Since some will have images that are wider than they are high, and may have more text than others, do you think it would look better if they were all bottom aligned (so all the add to cart buttons line up) rather than that top? Is there a way to do that?

It can be done; it involves adding a bunch of tags in the code in product_listing.php so they can be affected by the stylesheet. I have gone over this in a couple of threads in the past day. I'm tired and don't feel like looking them up right now...

Ok thank you, I will try to search for it.