Latest Products Box With Border And No Tables

[Guest]

Hi Everyone

I've been struggling with this for quite some time....

I needed to align 3 boxes across using css and no tables.

I realise that when using float IE has a problem with it so by adding display:inline it fixes the 3 px gap. It all looks 100% now.... both in IE and FF but can someone tell me if i have done this correctly....

This is what i have in the layout.CSS

/***************************************

Latest Products 3 bordered boxes BASED on Thumbs at 100px in CC3

**************************************/

#LatestProducts {

	padding:0;

	margin-left:0;

	margin-top:10px;

	width:520px;

	padding-left:23px;

}

.mainouterB {

	float:left;

	padding:0;

	width:161px;

	height:220px;

	text-align:center;

	background-repeat:no-repeat;

	background-position:left top;

	display:inline;/*ie hack*/

}

.bigouterB {

	width:161px;

	height:179px;

	border:none;

	display:inline;/*ie hack*/

}

.catouterB {

	width:140px;

	height:160px;

	padding:0;

	text-align:center;

	float:left;

	position:relative;

	margin-left:10px;

	display:inline;/*ie hack*/

}

.imagepB {

	width:130px;

	height:115px;

	padding:0;

	text-align:center;

	float:left;

	position:relative;

	margin-left:10px;

	display:inline;/*ie hack*/

	padding-top:10px;

	border:1px solid #000000;

}

.LPTextBox {

	width:145px;

	float:left;

	padding-left:6px;

}

/***************************************/

This is what i have in the index.tpl

<div id="LatestProducts">

<!-- BEGIN: latest_prods -->

   	

	  <!-- BEGIN: repeat_prods -->

	   <div class="mainouterB">

			<div class="bigouterB">

				<div class="catouterB">  

 					<div class="imagepB">

					

<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" title="{VAL_PRODUCT_NAME}"  class="" /></a>

			

			</div> <!--imageB-->

			

	<div class="LPTextBox"><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}" class="LPText">{VAL_PRODUCT_NAME}</a>

	<br />

 

		   <span class="LPprice">{TXT_PRICE}</span><span class="txtSale">{TXT_SALE_PRICE}</span></div>

			</div> <!--cat outerB-->

	</div> <!--bigouterB-->

</div> <!--mainouterB-->

		

<!--close Product-->

<!-- END: repeat_prods -->

<br clear="all" />

<!-- END: latest_prods -->

</div>

If you can see any problemos with this please let me know.

Thanks

Antz :yeahhh: