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



Tag cloud for css, html
@param acid2 actionlistener ajax asp automation background beta body browser bug c++ calendar cart cgi changeable checkbox code css current date 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 internetexplorer java javadoc javascript jlabel keyword layout marquee microsoft mysql navigationbars news opacity opera paging parameter perl photoshop php positioning post problem schools security shopping singleton source static studio tag test testautomation training ui unicode url validation vb vbulletin visual visualization w3c web webdesign website wysiwyg xhtml xml
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC