943,901 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Divs not postioned well in main div
Ad:
Permalink
Jul 9th, 2009
0

Divs not postioned well in main div

Expand Post »
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Abdlah is offline Offline
2 posts
since Jul 2008
Permalink
Jul 10th, 2009
0

Re: Divs not postioned well in main div

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. }
Reputation Points: 12
Solved Threads: 34
Posting Whiz
sreein1986 is offline Offline
306 posts
since May 2008
Permalink
Jul 11th, 2009
0

Re: Divs not postioned well in main div

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.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Abdlah is offline Offline
2 posts
since Jul 2008
Permalink
Jul 12th, 2009
0

Re: Divs not postioned well in main div

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

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: HTML Tables vs CSS & divs - examples/help
Next Thread in HTML and CSS Forum Timeline: Css border showing double





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


Follow us on Twitter


© 2011 DaniWeb® LLC