problem with home page featured/new columns

On my home page, I have specified to display 3 images of new products but the site shows just 2 images and then breaks and shows 1 image and then breaks and shows the next row.
It is as if the three images don't fit on the same row.

When I look at the source, it does clearly show that the width is 33% for each image so they should all fit on the same row but they don't.

Anyone have any idea what the problem might be.

I am having a similar problem with displaying additional iamges on the product info and I bet the fix for this would be the same as the other.

To see the home page, you can visit:
http://www.innerbalancehealthcenter.com/shop

I put a border around the cells to better see the problem.

You may have padding in an outer container that takes up invisible space, without reducing the calculation of "100%".

Try reducing the widths to 32%, 31%, etc. and see what works.

You also need to reduce the font size in your upper header navbar so it doesn't overrun the page width.

gjh42:

You may have padding in an outer container that takes up invisible space, without reducing the calculation of "100%".

Try reducing the widths to 32%, 31%, etc. and see what works.

You also need to reduce the font size in your upper header navbar so it doesn't overrun the page width.

I tried to manually specify widths in the CSS file but it didn't change.
However, when I change the Admin/Index Listing to display 4 images, then the width changes to 25% and 3 images are displayed and 1 gets bumped.

Any idea where to look for padding in an outer container? I have the right column turned off globally in admin and even tried to make the right column 0px just to be sure. Still no luck.

Finally, what do you mean by reduce the upper header navbar font. Everything in the header seems to fit fine. We have opted to optimize the site for 1024x768 screens.

I appreciate you taking the time to even look at the problem. It's been driving me crazy. I love Zen Cart and was just getting used to 1.26. Sometimes it gets frustrating spending hours on what should be a very simple matter. Still... the positives of Zen Cart far outweigh the quirks (which are more user errors than anything)

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
padding: .8em 0.8em;
}

The padding in that class is your problem. Remove it and your 1 pixel border, things should work properly again.

Thank you so much. That took care of the problem on the home page. I was hoping this would also fix my additionalimages problem but it did not.

I will experiment with padding. Although I tried turning all padding to 0 and the problem is still there.

By the way... for others that are learning CSS, I discovered a great extension for the Firefox Browser called View CSS. This opens up the CSS file in a sidebar and as you make changes to your CSS file, you see the actual changes on your site. These are just temporary changes and you are not really updating the actual CSS file. This is a much quicker way to troubleshoot instead of making a change and uploading and repeating over and over.