margin and padding problem

[CoolCarPartsOnline]

Iam trying to add margin or gap between the listings in my product display page and sub-categoires pages. No matter if I have 3 or 4 colum diplay if I add 1px margin the third product will jump to the next line. Please take a look: http://www.coolcarpartsonline.com/bo....html?sea=shop
Is there a way to add a space between the listings without breaking the layout.

[kuroi]

It looks to me as though you may have already been playing with the embedded width for these boxes. That is indeed the way to go, but you haven't reduced them far enough.

The boxes have an internal width for their content, but are then made wider by adding padding and borders. Margins further increase the amount of space the boxes take up.

When the expanded widths of the boxes plus the margins between them exceeds the space available, the next will drop down to the next row, which is what you are experiencing.

So basically if you want to add spacing and borders you must make the boxes thinner to compensate - and bear in mind that you may need to take a special look at your site in IE6 and it tends to double the margins for floated boxes and generally gets its width calculations a little wrong.

[CoolCarPartsOnline]

I just checked it in IE6 it does look weired, worse than IE7.
Iam not sure If i know how to adjust the width of the box. All I did was play with margin for the ceneterBoxContent. Iam attaching the CSS file if you know where I need to modify it I can do it.

/**
 * 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: url(../images/background.jpg);
	}

a img {border: none; }

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

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

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

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.4em;
	}

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

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: left;
	padding-Top: 1px;
	padding-left: 4px;
	}

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*/
#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 950px;
	vertical-align: top;
	border: 3px solid #c0c0c0;
	}


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

#logoWrapper{
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	background-color: #000000;
	height:154px;
	image-align: left;
	}


#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 
#navColumnOneWrapper, #navColumnTwoWrapper {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}
	
#tagline {
	color:#000000;
	font-size: 2em;
	text-align : center;
	vertical-align: top;
	margin-left: 2em;
	}

#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;
	}
#navSuppWrapper {	
	background-color: #000000;
	padding: .0em 0em;
	font-weight: bold;
	height: 1%;
	margin: .5em;
	}


#navMainWrapper, #navCatTabsWrapper {
	margin: 0.4em;
	background-color: #000000;
	/*background-image: url("../images/headerimage.jpg");*/
	padding: 0.4em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	}

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

#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: #ffffff;
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	border-top: 1px solid #000080;
	border-bottom: 1px solid #000080;
	border-right: 1px solid #000080;
	border-left: 1px solid #000080;


	
	}

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

#navColumnOne {
	background-color: transparent;
	}

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

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

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

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

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

.tableHeading, #cartSubTotal {
	background-color: #ffffff;
	font-weight: bold;
	 }

#cartSubTotal {
		border-top: 1px solid #000080;
	border-bottom: 1px solid #000080;
	border-right: 1px solid #000080;
	border-left: 1px solid #000080;
		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;
	}


.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*/


.categoryIcon {}

#cartImage {
	margin: 0.5em 1em;
	}



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

	}
.centerBoxWrapper {
	border: 1px solid #000000;
	height: 1%;
	margin: 1.1em 0.4em;
	}
.centerBoxHeading{
	background-color: #ffffff;
	}

h2.centerBoxHeading {
	font-size: 1.3em;
	color: #ffffff;
	/*background-image: url('../images/center_bg.png');*/
    background-repeat: no-repeat;
   	text-align: center;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.3em;
	font-weight:;
	color: #000000;
	}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
	font-size: 1.0em;
	color: #000000;
}

.leftBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-color: #808080;
	background-image: url(../images/tile_back.gif);
	padding: 0.1em 0.0em;
	}
	.centerBoxHeading {
	margin: 0em;
	background-color: #000000;
	background-image: url(../images/tile_back.gif);
	padding: 0.1em 0.0em;
	}

.leftBoxContainer, .rightBoxContainer {
	margin: 0em;
	border: 2px solid #000000;
/*	border-bottom: 1px solid #D70000;*/
	margin-top: .1em;
	margin-bottom: .1em;
	}
.rightBoxContainer {
	text-align: right;
	float: right;
	}
.sideBoxContent {
	background-color: #d7d7d7;
	padding: 0.4em;
	}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
	color: #ffffff;
	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;
	}


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





.searchHeader{
	text align: middle;

	}



#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 {
	font-color: #ff0000;
	}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
	clear: both;
	font-color: #ff0000;
	}
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
	color: #ff0000;
		}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody {
	color: #000000;
	}

#shippingEstimatorContent {
	clear: both;
	color: #000000;
	} 

.seDisplayedAddressLabel {
	background-color:#cacaca;
	text-align: center;
	}
.seDisplayedAddressInfo {
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	}
#seShipTo {
	padding: 0.2em;
	}
	
.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:1.2em; 
padding:0 10px 5px 10px; 
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:10px;
}
.xsnazzy {
background: transperent; 
/*width:150px; */
/*float:left; */
/*margin:0 3px;*/
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#808080; 
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
}
.color_b {
background:#d4d8bd; 
color:#000;
}
.color_c {
background:#758279; 
color:#fff;
}
.color_d {
background:#b2ab9b; 
color:#000;
}
#performancesidebox .xsnazzy, #exteriorsidebox .xsnazzy, #audiosidebox .xsnazzy, #lightingsidebox .xsnazzy, #interiorsidebox .xsnazzy  {
text-align: left;
padding-top: 5px;
}
#authorizenet .xsnazzy, #tellafriend .xsnazzy,#shoppingcart .xsnazzy {
text-align: center;
padding-top: 5px;
}
a:link, #performancesidebox ul li a {
	color: #000080;
	text-decoration: none;
	}
 
a:visited #performancesidebox{
	color: #000080;
	text-decoration: none;
	}

a:hover, #performancesideboxul li { 
	color: #000080;
	}
#performancesidebox ul {
    list-style-type: none;
    margin: 2px;
    font-weight: bold;
    font-size: 1.0em;
    }

Thanks in Advance

[CoolCarPartsOnline]

Hello Kuroi,
I just remembered something. Are you experience in Zen Cart PHP. Iam trying to find someone to make my Zen cart site function simillar to the this site. Iam not sure if it has to be done using Attributes or a 3rd party script I thought I would ask you.

http://www.autoaccessorystore.com/ho...=detail&id=136

Please let me know