HTML and CSS RSS HTML and CSS RSS

Three column CSS position

Reply

•
•
Join Date: May 2009
Posts: 6
Reputation: bjdmb is an unknown quantity at this point 
Solved Threads: 0
bjdmb bjdmb is offline Offline
Newbie Poster

Three column CSS position

 
0
  #1
Oct 19th, 2009
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;
HTML and CSS Syntax (Toggle Plain Text) 
  1. #productbox{
  2. 	width:666px;
  3. 	background-image:url(../slices/item-bkg.png);
  4. 	background-repeat:no-repeat;
  5. 	height:173px;
  6. }
  7. .productimage {
  8. 	float: left;
  9. 	width: 100px; 
  10. 	margin-left: 0px; 
  11. 	padding:20px;
  12. 	}	
  13.  
  14. .producttext {
  15. 	float: left;
  16. 	width:250;
  17. 	margin: 0 100px 0 100px; 
  18. 	font:Arial, Helvetica, sans-serif;
  19. 	font-size:12px;
  20. }
  21.  
  22. .productprice{
  23. 	float: left;
  24. 	width: 100px; 
  25. 	margin-left: -350px; 
  26. 	font-family:Arial, Helvetica, sans-serif;
  27. 	font-size:12px;
  28. 	color:#01204b;
  29. }

Here is the HTML:
HTML and CSS Syntax (Toggle Plain Text) 
  1. <div id="productbox">
  2. 				<div class="productimage"><img src="images/product-home-internet.png"></div>
  3. 				<div class="producttext"><span class="orangetitlelg">Fast Home Internet</span><br><br>
  4. 				Fast Home Internet gives you more speed. This plan is ideal for online shopping, sending photos or even downloading 
  5. 				music. You'll connect at download speeds of 3Mbps and upload speeds of 500Kbps**. Usage is unlimited.<br><br>
  6. 				$35 activation fee  (waived with 2 year sign up).
  7. 				</div>
  8. 				<div class="productprice"><span class="productnumber">$30</span>/month<br>
  9. 				  <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>
  10. 				</div>

Any help would be very much appreciated.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 15
Reputation: seanooi is an unknown quantity at this point 
Solved Threads: 0
seanooi seanooi is offline Offline
Newbie Poster
 
1
  #2
Oct 19th, 2009
I'm not sure if this is how you would want it to be.
html Syntax (Toggle Plain Text) 
  1. <div id="container">
  2. <div id="main">
  3.  
  4. <div id="productimage">
  5. <img src="images/product-home-internet.png">
  6. </div>
  7.  
  8. <div id="producttext">
  9. <span class="orangetitlelg">Fast Home Internet</span><br \><br \>
  10. 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).
  11. </div>
  12.  
  13. <div id="productprice">
  14. <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>
  15. </div>
  16.  
  17. <div class="clear"></div>
  18. </div><!-- #main end -->
  19. </div><!-- #container end -->

css Syntax (Toggle Plain Text) 
  1. #container
  2. {
  3. 	width:550px; 
  4. 	margin:0 auto;
  5. 	border: 1px solid #000;
  6. 	padding: 10px;
  7. }
  8.  
  9. #main
  10. {
  11. 	width:auto;
  12. 	display:block;
  13. 	padding:10px;
  14. 	border: 1px solid #000;
  15. }
  16.  
  17. #productimage
  18. {
  19. 	width:100px;
  20. 	margin-right:25px;
  21. 	float:left;
  22. 	border: 1px solid #000;
  23. }
  24.  
  25. #producttext
  26. {
  27. 	width:250px;
  28. 	margin-right:25px;
  29. 	float:left;
  30. 	border: 1px solid #000;
  31. }
  32.  
  33. #productprice
  34. {
  35. 	width:100px;
  36. 	float:left;
  37. 	border: 1px solid #000;
  38. }
  39.  
  40. .clear
  41. {
  42. 	clear:both;
  43. }

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.
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 6
Reputation: bjdmb is an unknown quantity at this point 
Solved Threads: 0
bjdmb bjdmb is offline Offline
Newbie Poster

Thank You

 
0
  #3
Oct 20th, 2009
With a little number manipulation that worked like a charm. Thanks again.
Reply With Quote Quick reply to this message  
Reply

Tags
•
•
•
•
Tags
css, html

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



@param acid2 actionlistener ajax asp automation background beta body browser bug c++ cart cgi checkbox code css design developer development doctype dom dreamweaver editor element explorer firefox form format functiontesting google gridview gui guidancer head hover html ide ie7 ie8 iframe include internet java javadoc javascript jlabel keyword layout microsoft mysql navigationbars news opacity paging parameter perl photoshop php positioning post problem security shopping singleton source static studio tag test testautomation ui unicode url vb visual visualization w3c web website wysiwyg xhtml xml
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC