0

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.

2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by bjdmb
1

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.

Votes + Comments
Great job. Worked the first time.
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.