Three column CSS position

[bjdmb]

I need another set of eyes to look this over. I can't seem to get the three columns to work properly with the product listing at the bottom of the page. Here is the CSS;

#productbox{
	width:666px;
	background-image:url(../slices/item-bkg.png);
	background-repeat:no-repeat;
	height:173px;
}
.productimage {
	float: left;
	width: 100px; 
	margin-left: 0px; 
	padding:20px;
	}	

.producttext {
	float: left;
	width:250;
	margin: 0 100px 0 100px; 
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
}

.productprice{
	float: left;
	width: 100px; 
	margin-left: -350px; 
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#01204b;
}

Here is the HTML:

<div id="productbox">
				<div class="productimage"><img src="images/product-home-internet.png"></div>
				<div class="producttext"><span class="orangetitlelg">Fast Home Internet</span><br><br>
				Fast Home Internet gives you more speed. This plan is ideal for online shopping, sending photos or even downloading 
				music. You'll connect at download speeds of 3Mbps and upload speeds of 500Kbps**. Usage is unlimited.<br><br>
				$35 activation fee  (waived with 2 year sign up).
				</div>
				<div class="productprice"><span class="productnumber">$30</span>/month<br>
				  <a href="contactus.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','slices/learnmore-on.png',1)"><img src="slices/learnmore-off.png" name="Image6" width="121" height="50" border="0"></a></div>
				</div>

Any help would be very much appreciated.

[seanooi]

I'm not sure if this is how you would want it to be.

<div id="container">
<div id="main">

<div id="productimage">
<img src="images/product-home-internet.png">
</div>

<div id="producttext">
<span class="orangetitlelg">Fast Home Internet</span><br \><br \>
Fast Home Internet gives you more speed. This plan is ideal for online shopping, sending photos or even downloading music. You'll connect at download speeds of 3Mbps and upload speeds of 500Kbps**. Usage is unlimited.<br \><br \>$35 activation fee  (waived with 2 year sign up).
</div>

<div id="productprice">
<span class="productnumber">$30</span>/month<br \><a href="contactus.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','slices/learnmore-on.png',1)"><img src="slices/learnmore-off.png" name="Image6" width="121" height="50" border="0"></a>
</div>

<div class="clear"></div>
</div><!-- #main end -->
</div><!-- #container end -->

#container
{
	width:550px; 
	margin:0 auto;
	border: 1px solid #000;
	padding: 10px;
}

#main
{
	width:auto;
	display:block;
	padding:10px;
	border: 1px solid #000;
}

#productimage
{
	width:100px;
	margin-right:25px;
	float:left;
	border: 1px solid #000;
}

#producttext
{
	width:250px;
	margin-right:25px;
	float:left;
	border: 1px solid #000;
}

#productprice
{
	width:100px;
	float:left;
	border: 1px solid #000;
}

.clear
{
	clear:both;
}

As for the css border selector, I just like to put a border around my divs to show where they exactly are. You can take them away if you wish to.

[bjdmb]

With a little number manipulation that worked like a charm. Thanks again.