Divs not postioned well in main div

Reply

•
•
Join Date: Jul 2008
Posts: 2
Reputation: Abdlah is an unknown quantity at this point 
Solved Threads: 0
Abdlah Abdlah is offline Offline
Newbie Poster

Divs not postioned well in main div

 
0
  #1
Jul 9th, 2009
I am new to CSS and I am having problems with my code. I have created these CSS rules and applied them to the code that follows after the rules.

My intention is to have all my divs line up in a straight line within the searchresultscontainer div. But when I check my results in the browser, none of them are positioned correctly. What am I not getting right?

CSS Syntax (Toggle Plain Text) 
  1. .searchresultscontainer{
  2. width:800px;
  3. height:62px;
  4. border-style:solid;
  5. border-color:#FF0000;}
  6.  
  7.  
  8.  
  9. .searchresultsimg{
  10. position:absolute;
  11. width:100px;
  12. height:60px;
  13. background-color:#CCCCCC;
  14. float:left;
  15. left:0px;
  16. border-style:solid;
  17. border-color:#9966CC;
  18. }
  19.  
  20. /*.searchresultsdetail{
  21. position:relative;
  22. width:700px;
  23. height:61px;
  24. text-align:center;
  25. background-color:#CCCCCC;
  26. float:right;
  27. left:101px;
  28. margin:0;
  29. padding:0;
  30. }*/
  31.  
  32. .productdescription{
  33. position:absolute;
  34. width:300px;
  35. height:36px;
  36. text-align:left;
  37. float:left;
  38. left:101px;
  39. margin:0;
  40. padding:10;
  41. border-style:solid;
  42. border-color:#FFCC00;
  43. }
  44.  
  45. .productmodelno{
  46. position:absolute;
  47. width:100px;
  48. height:36px;
  49. text-align:left;
  50. float:left;
  51. left:401px;
  52. margin:0;
  53. padding:10;
  54. border-style:solid;
  55. border-color:#996600;
  56. }
  57.  
  58. .productmodelyear{
  59. position:absolute;
  60. width:100px;
  61. height:36px;
  62. text-align:left;
  63. float:left;
  64. left:501px;
  65. margin:0;
  66. padding:10;
  67. border-style:solid;
  68. border-color:#00FF00;
  69. }
  70.  
  71. .productprice{
  72. position:absolute;
  73. width:100px;
  74. height:36px;
  75. text-align:left;
  76. float:left;
  77. left:601px;
  78. margin:0;
  79. padding:10;
  80. border-style:solid;
  81. border-color:#000033;
  82. }
  83.  
  84. .productuserid{
  85. position:absolute;
  86. width:100px;
  87. height:36px;
  88. text-align:left;
  89. float:left;
  90. left:701px;
  91. margin:0;
  92. padding:10;
  93. border-style:solid;
  94. border-color:#990000;
  95. }

xhtml code to which CSS are applied:

xhtml Syntax (Toggle Plain Text) 
  1. <div class="searchresultscontainer">
  2. <div class="searchresultsimg"><!--- creating a resized version of uploaded image of product --->
  3. <cfimage source="#ExpandPath('images/consumer/#Cnsmr_ProductIMAGE#')#" action="resize" width="100" height="60" name="resizedImg" format= "jpg">
  4. <cfimage source="#resizedImg#" action="writeToBrowser"><!---img src="images/consumer/#Cnsmr_ProductIMAGE#"--->
  5. </div>
  6.  
  7. <div class="productdescription"><font size="+2">#Cnsmr_ProductDESCRIPTION# </font>&nbsp; <font size="+2"></div>
  8.  
  9. <div class="productmodelno"><a href="showProductDetail.cfm?Cnsmr_ProductCountID=#URLEncodedFormat(TRIM(Cnsmr_ ProductCountID))#">#Cnsmr_ProductMODELNo# </font>&nbsp;</a></div> 
  10.  
  11. <div class="productmodelyear"><font size="+2">#Cnsmr_ProductMODELYEAR# </font>&nbsp;</div> 
  12.  
  13. <div class="productprice"><font size="+2">#Cnsmr_ProductPRICE#</font>&nbsp;</div> 
  14.  
  15. <div class="productuserid"><font color="#000066#" size="+2">#User_id#</font></div>
  16.  
  17. </div> <!--- end of searchresultscontainer --->

A would appreciate any help on how to correct this. TIA
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2008
Posts: 302
Reputation: sreein1986 is an unknown quantity at this point 
Solved Threads: 33
sreein1986's Avatar
sreein1986 sreein1986 is offline Offline
Posting Whiz

Re: Divs not postioned well in main div

 
0
  #2
Jul 10th, 2009
Please check below code. and let me know if it is working
HTML and CSS Syntax (Toggle Plain Text) 
  1. .searchresultscontainer{
  2. 	width:1520px;
  3. 	height:62px;
  4. 	left:14px;
  5. 	border-style:solid;
  6. 	border-color:#FF0000;
  7. }
  8.  
  9.  
  10.  
  11. .searchresultsimg{
  12. 	position:absolute;
  13. 	width:100px;
  14. 	height:55px;
  15. 	background-color:#CCCCCC;
  16. 	float:left;
  17. 	left:14px;
  18. 	border-style:solid;
  19. 	border-color:#9966CC;
  20. 	top: 19px;
  21. }
  22.  
  23. /*.searchresultsdetail{
  24. position:relative;
  25. width:700px;
  26. height:61px;
  27. text-align:center;
  28. background-color:#CCCCCC;
  29. float:right;
  30. left:101px;
  31. margin:0;
  32. padding:0;
  33. }*/
  34.  
  35. .productdescription{
  36. 	position:absolute;
  37. 	width:292px;
  38. 	height:52px;
  39. 	text-align:left;
  40. 	float:left;
  41. 	left:118px;
  42. 	margin:0;
  43. 	padding:10;
  44. 	border-style:solid;
  45. 	border-color:#FFCC00;
  46. 	top: 19px;
  47. }
  48.  
  49. .productmodelno{
  50. 	position:absolute;
  51. 	width:344px;
  52. 	height:57px;
  53. 	text-align:left;
  54. 	float:left;
  55. 	left:461px;
  56. 	margin:0;
  57. 	padding:10;
  58. 	border-style:solid;
  59. 	border-color:#996600;
  60. 	top: 19px;
  61. }
  62.  
  63. .productmodelyear{
  64. 	position:absolute;
  65. 	width:100px;
  66. 	height:51px;
  67. 	text-align:left;
  68. 	float:left;
  69. 	left:816px;
  70. 	margin:0;
  71. 	padding:10;
  72. 	border-style:solid;
  73. 	border-color:#00FF00;
  74. 	top: 21px;
  75. }
  76.  
  77. .productprice{
  78. 	position:absolute;
  79. 	width:100px;
  80. 	height:36px;
  81. 	text-align:left;
  82. 	float:left;
  83. 	left:1159px;
  84. 	margin:0;
  85. 	padding:10;
  86. 	border-style:solid;
  87. 	border-color:#000033;
  88. 	top: 20px;
  89. }
  90.  
  91. .productuserid{
  92. 	position:absolute;
  93. 	width:100px;
  94. 	height:36px;
  95. 	text-align:left;
  96. 	float:left;
  97. 	left:1416px;
  98. 	margin:0;
  99. 	padding:10;
  100. 	border-style:solid;
  101. 	border-color:#990000;
  102. 	top: 19px;
  103. }
Thanx,
Shiriyal
http://shiriyal.blogspot.com/
if you problem solved add me as a reputation and mark it mark as solved
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2008
Posts: 2
Reputation: Abdlah is an unknown quantity at this point 
Solved Threads: 0
Abdlah Abdlah is offline Offline
Newbie Poster

Re: Divs not postioned well in main div

 
0
  #3
Jul 11th, 2009
This did not resolve my issue. the first two divs lined up properly, the second two did not line up but also overlapped each other and the last two did not line up and are separate, each standing alone.

Above all, all the divs are outside the main div.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: Divs not postioned well in main div

 
0
  #4
Jul 12th, 2009
You have tangled tags.

Your font tags are not nested entirely inside or entirely outside the div tags. Tag soup always throws the browser into quirks mode. Quirks mode makes divs go crazy.

You need to align your tags like this:
HTML and CSS Syntax (Toggle Plain Text) 
  1. <div>
  2.   <font>
  3.     <div>
  4.       ....
  5.     </div>
  6.   </font>
  7. </div>
The following does NOT work
HTML and CSS Syntax (Toggle Plain Text) 
  1. <div>
  2.   <div>
  3.     <font>
  4.       ....
  5.     </div>
  6.   </font>
  7. </div>

Also, the font tag is deprecated. Use the div tag or the span tag with CSS instead.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum


Views: 521 | Replies: 3
Thread Tools Search this Thread



Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart center cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format free frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC