Frustrated! - Product Listing - Columns Per Row isn't working!

I've done everything I can think of to fix this layout problem and it just wont go away!

Check out:

http://www.dashtop.com/shop/chevy-gmc-blazer-c-4_6_126.html

I have:

Product Listing - Columns Per Row - set to 3
Product Listing - Layout Style - set to columns

It still isn't displaying properly.

Any help would be great before I am forced to rebuild the whole site from scratch.

The strange thing was, before I added the 2 settings in the sql db, columns per row and layout settings were missing. Now that I have them showing up, the settings that i change aren't doing squat.

Please help!

:wacko: :blink: :cry: :( :yuck: :frusty:

Even the main category listing is screwed up!

http://www.dashtop.com/shop/trucks-c-4.html

It lists 3, then 1 and again.

Also, check out:

http://www.dashtop.com/shop/blazer-1967-1972-c-4_6_126_127.html

I don't know what's going on. This is insane!

.back {
	float: right;
	}

That needs to be float: left;

Kim:

.back {
float: right;
}

I was playing with that, and no matter what I set it to, left or right, it sill does not display it properly. I went ahead and flipped it back to left. But still, it will display 2 products, or categories, then 1, then 2 then 1. If I set it to display 4 wide, it will display 3, then 1, then 3 then 1.

I'm going to set it to 4 wide. Watch what happens...

I have narrowed the problem down to some file in my template directory. I set up a brand new site, and all I did was copy my template directory over, and the problem started all over again.

Thank you for the reply however. I know this will get fixed. It's probably some simple little setting somewhere.

Here's what I'm going to do. In my template directory, I'm going to replace every file with the originals except my stylesheet.

One at a time, I should find the cause.

The stylesheet is probably the cause.
The code divides the center column giving each product a percentage of the space available, and if you add margins or padding, they expand to take more space than is available (forcing the last item to the next row). Sometimes the math works out with browser calculations to be a microscopic amount over even without added margins/padding.

If that is the case, try in your stylesheet

.categoryListBoxContents {margin-left: -0.2em;}

Adjust as required, and do the same with margin-right if needed.

The other alternative is to change the code in product_listing.php or other relevant file to figure the width from 99% instead of 100%. This has been discussed a number of times in the forum.

Added:

.categoryListBoxContents {
margin-left: -0.2em;
margin-right: -0.2em;
}

Still no go.

Thank you for the reply.

Here's something weird:

If I set the Product Listing - Columns Per Row to 2, I get 1 product per row, aligned to the left. However, If I set it to 1 product per row, I do get one, only they are aligned in the center....???

This is strange. I'm posting my stylesheet.css file.

/**

• Main CSS Stylesheet
• @package templateSystem
• @copyright Copyright 2003-2007 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
  */

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background-color: #f6f6f6;
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
color: #000000;
text-decoration: none;
font-family: verdana, arial, helvetica, sans-serif;
}

a:visited {
color: #000000;
text-decoration: none;
font-family: verdana, arial, helvetica, sans-serif;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}

a:active {
color: #0000FF;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.3em;
}

.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 3px;
}

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}

FORM, SELECT, INPUT {
display: inline;
font-size: 1em;
margin: 0.1em;
}

TEXTAREA {
/* float: left;*/
margin: auto;
display: block;
width: 95%;
}

input:focus, select:focus, textarea:focus {
background: #F0F8FF;
}

FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}

LEGEND {
font-weight: bold;
padding: 0.3em;
}

LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

LABEL.inputLabel {
width: 11em;
float: left;
}

LABEL.inputLabelPayment {
width: 15em;
float: left;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 12em;
float: left;
}

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}

/warnings, errors, messages/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #000000;
}

.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}

.messageStackSuccess {
background-color: #99FF99;
color: #000000;
}

.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}

/wrappers - page or section containers/
#mainWrapper {
background: #ffffff;
text-align: left;
width: 900px;
vertical-align: top;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#logoWrapper {
background: url(../images/top2.jpg);
background-repeat: repeat-x;
height: 125px;
padding: 2.9em 0em 0em 4em;
background-color: #F3F3F3 ;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#tagline {
color:#000000;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/navigation/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
font-weight: bold;
font-family: Verdana,Helvetica,Arial,sans-serif;
font-size: 1.2em;
background: url(../images/bg.png) repeat-x;
height: 33px;
width: 100%;
margin: 0;
padding: 0;
}

#navcusstommenu {
list-style-type: none;
width: auto;
position: relative;
display: block;
height:33px;
font-size: .6em;
background: url(../images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0; }

ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}

/RED/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #ffffff;
white-space: nowrap;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #000000;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navMainSearch {
float: right;
}

#navBreadCrumb {
background-color: #f6f6f6;
}

#navEZPagesTop {
background-color: #ffff33;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
color: 000000;
}

#navColumnOne {
background-color: #f6f6f6;
}

#navColumnTwo {
background-color: #f6f6f6;
}

/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding: 0.8em;
background-color: #F6F6F6;
}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

/Shopping Cart Display/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
border: 1px solid #000000;
padding: 1em;
}

.tableHeading TH {
border-bottom: 1px solid #cccccc;
}

.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;
}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #33CC33;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartOldItem {
color: #660099;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartBoxTotal {
text-align: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

.cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/Image Display/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

.categoryIcon {}

#cartImage {
margin: 0.5em 1em;
}

/Attributes/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {}

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 1em;
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #e6e6e6;
padding: 0.5em 0.2em;
border: 1px solid #e6e6e6;
}

.leftBoxContainer {
border-top-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-left-color: #000000;
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #e6e6e6;
padding: 0.4em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.1em;
color: #FFFF00;
}

.rightBoxHeading {
margin: 0em;
background-color: #663366;
padding: 0.2em 0em;
}

h3.leftBoxHeading a:hover {
color: #FFFF33;
text-decoration: none;
}

h3.rightBoxHeading a:hover {
color: #FF0000;
text-decoration: none;
}

.rightBoxContent {
background-color: #ffffff;
margin-bottom: 1em;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #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, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
padding: 0.5em;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
background-color: #0000CC;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/misc/
.back {
float: left;
}

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}

.hiddenField {
display: none;
}
.visibleField {
display: inline;
}

CAPTION {
/display: none;/
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/vertical-align: top/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

TR.tableHeading {
background-color: #cacaca;
height: 2em;
}

#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
clear: both;
}

.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}

#navMain ul {
float:right;
}

#attrib-1-6 {display: none;}

.categoryListBoxContents {
margin-left: -0.2em;
margin-right: -0.2em;
}

gjh42:

The stylesheet is probably the cause.
The code divides the center column giving each product a percentage of the space available, and if you add margins or padding, they expand to take more space than is available (forcing the last item to the next row). Sometimes the math works out with browser calculations to be a microscopic amount over even without added margins/padding.

If that is the case, try in your stylesheet

.categoryListBoxContents {margin-left: -0.2em;}

Adjust as required, and do the same with margin-right if needed.

The other alternative is to change the code in product_listing.php or other relevant file to figure the width from 99% instead of 100%. This has been discussed a number of times in the forum.

Thank you for your help! PROBLEM SOLVED. What I ended up doing was taking the default stylesheet.css from the classic template and replacing my template with that. I'll just go through it and customize it again. Not that big of a pain.

Thank you again!

:clap:

"If I set the Product Listing - Columns Per Row to 2, I get 1 product per row, aligned to the left. However, If I set it to 1 product per row, I do get one, only they are aligned in the center...."

This was a proof of the cause of the problem. With two per row, they each were given half the column width but didn't quite fit, so both ended up with the content centered in the half-width that was floated left against the side of the column.
With one per row, it was given the whole width, and the content was centered in that.

Here is the exact cause of this.
In the stylesheet, near the very bottom:

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #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, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
padding: 0.5em; <----------
}If I take that line out that is highlighted in red, the problem goes away. Cool! :clap: :cool: