944,092 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Three column CSS position
Ad:
Permalink
Oct 19th, 2009
0

Three column CSS position

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bjdmb is offline Offline
7 posts
since May 2009
Permalink
Oct 19th, 2009
1
Re: Three column CSS position
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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
seanooi is offline Offline
19 posts
since May 2009
Permalink
Oct 20th, 2009
0

Thank You

With a little number manipulation that worked like a charm. Thanks again.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
bjdmb is offline Offline
7 posts
since May 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: flash calendar
Next Thread in HTML and CSS Forum Timeline: teach me


Tags
css, html



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC