Switched from fixed width to fluid and products no longer in grid

[proplaye]

This is my first time posting on here and can typically find the answer to what I am looking for, but couldn't this time. I have switched my layout from a fixed width to a fluid format. Before I did that, my products were 3 across and then however many down. After the switch, the products are no longer 3 across...they now run in a straight column. Can anyone help me find a way to get them back to a grid format?

Thanks!

Here is my code:


/**
* 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: #000000;
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
color: #FF9900;
text-decoration: none;
}

a:visited {
color: #FF9900;
text-decoration: none;
}

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


a:active {
color: #660000;
}

h1 {
font-size: 1.5em;
color: #000000;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

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

.biggerText {
font-size: 1.2em;
}

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

/* Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
*html .centerColumn {
height: 1%;
}
*/

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

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

TEXTAREA {
margin: auto;
display: block;
width: 95%;
}

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

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

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

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: center
}

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

LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

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

#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}

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 #9a9a9a;
}

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

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

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

/*wrappers - page or section containers, with was 800px*/
#mainWrapper {
background-color: #747474;
background-repeat: repeat;
text-align: left;
width: 100%;
vertical-align: top;
border: 1px solid #9a9a9a;
}

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

#logoWrapper{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
width: 100%;
vertical-align: top;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
}

#tagline {
color:#990000;
font-size: 5em;
font-weight: bold;
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;
background-color: #000000;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 100%;
}

#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

#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;
}

#navCatTabs ul li a {
color: #333333;
}

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

#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 {
padding: 0.5em 0.5em;
background-color: #747474;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop {
background-color: #747474;
background-image: url(../images/tile_new.gif);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

/*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;
width:100%;
}

.alert {
color: #ffffff;
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: #ffffff;
}

.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 #9a9a9a;
}

.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;
background-color: #E4FEf5;
border: 1px solid #003D00;
}
.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;
list-style-type: none;
}

#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;
}

.centerBoxWrapper {
border: 1px solid #9a9a9a;
height: 1%;
margin: 1.1em 0;
}

h2.centerBoxHeading {
font-size: 1.3em;
color: #ffffff;
}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1em;
color: #ffffff;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #990000;
margin-top: 1.5em;
}

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

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #3399ff;
text-decoration: none;
}

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #FFFFFF;
}

.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;
}

#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;
}

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #330000;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #004080;
text-decoration: none;
}
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #FF0000;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

/*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;
}

.productListing-rowheading {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
height: 2em;
color: #FFFFFF;
}

#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;
}

[stevesh]

No need to post your CSS, we can see it if you (please) provide a link to the site.

[proplaye]

Well, the site isn't suppose to be open to be shopped yet, so I have it down for maintenance. I will open it up for a few hours and hopefully you will be able to see it and help me out.

Thanks in advance!

ProPlayerAudio.com

[proplaye]

The site will be live all day today, as well...

[proplaye]

We are leaving it live now, so if anyone has a chance to pop by and see the site and help me figure out why it isn't doing what I want, that would be great!

Thanks!

[kobra]

In your stylesheet.css file you have the followiing:

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

Change it to float left

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

If this plays not nicely with the other items you can seperate it into it's own entry

[stiggy100]

As an unrelated post is reference to your website, it might be worth considering working on your images, currently they are being 'scaled down' and it really impacts loading time.

There is a superb thread here that explains all you need to know:

http://www.zen-cart.com/forum/showthread.php?t=9114

[proplaye]

Oh my gosh! Thank you both some much for the wonderful advice. I have already fixed the column vs. row problem, now we are working on updating the images. Thanks again!

[proplaye]

So, of course, as things always work out, this has fixed my first issue, but now I have found another. My images are in the rows and columns like I wanted, but if the window is made smaller, it overlaps the products. What I would like to have accomplished is this: I would like the products to (not overlap, obviously, but) reflow based on the size of the window. So, let's say a maximum of 3 or 4 across, but if it made smaller, have a minimum of 1 or 2 across. My problem is, I have no clue how to make this happen. Thoughts?

Thanks!

My site again is www.proplayeraudio.com

[gjh42]

There are two basic solutions to this: make a minimum (and possibly maximum) size to the site so that the center column can't get crowded past a certain point (or get too spaced out), or make the individual products fixed width and float them to the number that fit whatever the center width is.

The first can be done by adding to the #mainWrapper rule

min-width: 700px;
max-width: 1300px;

or whatever sizes work for you.

The second solution requires that all the products be guaranteed to be the same height, or else one may get "stuck" on a previous one and mess up the layout.
First you would have to eliminate the width which is dynamically set as a percentage of the total depending on how many are set to display per row.
/includes/modules/your_template/product_listing.php

    // Following code will be executed only if Column Layout (Grid Layout) option is chosen
    if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
      $lc_text = implode('<br />', $product_contents);
      $list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
                                                 'text'  => $lc_text);
      $column ++; 

    // Following code will be executed only if Column Layout (Grid Layout) option is chosen
    if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
      $lc_text = implode('<br />', $product_contents);
      $list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back"',
                                                 'text'  => $lc_text);
      $column ++; 

Set the width of .centerBoxContentsProducts {} in your stylesheet.

Then you would have to remove the <br class="clearBoth" /> which is inserted after each line of products in /includes/templates/your_template/common/tpl_columnar_display.php

    <?php echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n"; ?>
<?php
      }
    }
?>
<br class="clearBoth" />
<?php
  }
}
?>

    <?php echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n"; ?>
<?php
      }
    }
?>

<?php
  }
}
?>

Making a maximum or minimum number per row, and making them fit the row exactly, would be a lot more coding and require something like javascript to detect the user's window size.