Put gap between center box contents

[chuender]

I am trying to to put a gap between the new, featured, specials and also purchased center boxes. Right now, the links to the product info pages are long and almost flowing into each other. But modifying the CSS for the following classes leads to the last box of a given row wrapping to the next row:

centerBoxContentsNew, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured

Any pointers to how I should accomplish this would be greatly appreciated.
Thanks,


Chuender

[kobra]

A url to your site

[chuender]

[FONT=&quot]The site is not live yet... I've attached the screen shot and here's the html for that section:

[/FONT]

<div class="centerBoxWrapper" id="whatsNew">
<h2 class="centerBoxHeading">New Products For October - Dissolved Oxygen</h2>
    <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=275"><img src="images/jenco/6308DT.png" alt="6308DT 1/4 DIN Dissolved Oxygen Analyzer with Programmable Pressure and Salinity Compensation" title=" 6308DT 1/4 DIN Dissolved Oxygen Analyzer with Programmable Pressure and Salinity Compensation " height="98" width="100"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=275">6308DT 1/4 DIN Dissolved Oxygen Analyzer with Programmable Pressure and Salinity Compensation</a><br>$569.00</div>
    <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=271"><img src="images/jenco/9250.png" alt="9250 DO / Temp. Portable Meter with RS-232" title=" 9250 DO / Temp. Portable Meter with RS-232 " height="100" width="72"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=271">9250 DO / Temp. Portable Meter with RS-232</a><br>$350.00</div>
    <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=272"><img src="images/jenco/9251.png" alt="9251 DO / Temp. Portable Meter" title=" 9251 DO / Temp. Portable Meter " height="100" width="72"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=272">9251 DO / Temp. Portable Meter</a><br>$250.00</div>
<br class="clearBoth">

    <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=273"><img src="images/jenco/9173.png" alt="9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display" title=" 9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display " height="100" width="100"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=273">9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display</a><br>$299.00</div>
    <div class="centerBoxContentsNew centeredContent back" style="width: 33%;"><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=274"><img src="images/jenco/9173R.png" alt="9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display" title=" 9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display " height="100" width="100"></a><br><a href="http://localhost/zen-cart/index.php?main_page=product_info&amp;products_id=274">9173 Dissolved Oxygen Benchtop Meter with Extra Large LCD Display</a><br>$359.00</div>
<br class="clearBoth">
 
</div>

Thanks,

Chuender

[kobra]

As this is set to 33% automatically and different browsers calc the margins and padding differently you will have to manually adjust this in the css for each tag or globally

centerBoxContentsNew give a width of say 30% and then padding to match

[chuender]

Thought there might be a better way through Admin, but I'll give your advice a go.

Appreciate your input.

[finlander]

Kobra, great idea, I've been looking for some type of solution all day this issue, but when I tried this it appears that the styled width from the tpl overrides my css of 30% for the class. So won't work? any other ideas?