By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,327 Members | 2,627 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,327 IT Pros & Developers. It's quick & easy.

CSS flow error

P: 2
hey all,
After many many many hours of trying to get this to work i am at my wits end. Have had a few people try to help but nothing seems to solve the problem. Basically the site works fine in IE but in Firefox or Opera the content div is not being stretched down when i add in content to the main div.

Here is the code

Expand|Select|Wrap|Line Numbers
  1.  
  2. <style type="text/css">
  3. body
  4. {
  5. padding:0px;
  6. margin:0px;
  7. font-size: 12px;
  8. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  9. color: #3f3f3f;
  10. }
  11.  
  12. p
  13. {
  14. font-size: 12px;
  15. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  16. text-align: left;
  17. margin-left: 15px;
  18. margin-right: 15px;
  19.  
  20. H2{
  21. font-size: 10pt;
  22. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  23. color: #3f3f3f;
  24. padding-left: 10px;
  25. }
  26.  
  27. H1{
  28. font-size: 12pt;
  29. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  30. color: #3f3f3f;
  31. padding-left: 10px;
  32. }
  33.  
  34.  
  35.  
  36.  
  37. #wrapper
  38. {
  39. width:750px;
  40. /*removed for testing */
  41. margin:0 auto 0 auto;
  42. position:relative;
  43.  
  44.  
  45. background-color:#333333;
  46.  
  47. /*added for testing
  48. height:100%; */
  49. }
  50.  
  51. #inside_wrapper
  52. {
  53. width:700px;
  54. background-color:#DEDEDE;
  55. /*height:100%;*/
  56. margin:0 25px 0 25px;
  57. }
  58.  
  59. #header
  60. {
  61. top:0px;
  62. left:0px;
  63. height:300px;
  64. background-image:  url(/Header.jpg);
  65.  
  66. }
  67.  
  68. #main_menu
  69. background-color:red;
  70. height: 25px;
  71. width:700px;
  72. }
  73.  
  74. #content
  75. width:700px;
  76. background-color:#DEDEDE;
  77. position:relative;
  78. }
  79.  
  80. #main
  81. {
  82. top:25px;
  83. right:0px;
  84. width:500px;
  85. background-color:#DEDEDE;
  86. float:right;
  87.  
  88. }
  89.  
  90. #left_column
  91. {
  92. top:25px;
  93. width:200px;
  94. float:left;
  95. background-color:#DEDEDE;
  96. /*height:700px;*/
  97. }
  98.  
  99. #linkList
  100. {
  101. top: 0px;
  102. padding-left: 10px;
  103. color: #3f3f3f;
  104. float:left;
  105. width: 197px;
  106. }
  107.  
  108.  
  109. #footer
  110. {
  111. display: block; 
  112. text-align: center;
  113. font-size: 10px;
  114. background: #333333; 
  115. }
  116.  
  117. li a
  118. {
  119. color:#CCCCCC;
  120. display: block;
  121. font-weight: bold;
  122. font-size: 12px;
  123. text-transform: none;
  124. padding: 2px 0 3px 0;
  125. }
  126.  
  127. li a.c
  128. {
  129. font-size:12px;
  130. font-weight: normal;
  131. display: inline;
  132. padding: 0;
  133. text-transform: uppercase;
  134. }
  135.  
  136. ul,li
  137. {
  138. list-style: none;
  139. padding: 0;
  140. margin: 0;
  141. }
  142.  
  143. li
  144. {
  145. color:#CCCCCC;
  146. background: #3f3f3f;
  147. padding: 5px 7px;
  148. border-bottom: 1px solid #dedede; 
  149. text-transform: uppercase; 
  150. font-size: 9px;
  151. }
  152.  
  153. li:hover
  154. {
  155. background: #7D7D7D; 
  156. </style>
  157. </head>
  158.  
  159. <body>
  160. <!--start wrapper-->
  161. <div id="wrapper">
  162.  
  163. <!--start inside_wrapper-->
  164. <div id="inside_wrapper">
  165.  
  166. <!--start header-->
  167. <div id="header">
  168.  
  169. <!--end header-->
  170. </div>
  171.  
  172.  
  173.  
  174. <!--start mainmenu-->
  175. <div id="main_menu">
  176. <h2><a href=>Homepage</a>&gt;</h2>
  177. <!--end mainmenu-->
  178. </div>
  179.  
  180. <!--start content-->
  181. <div id="content">
  182.  
  183. <!--start left_column-->
  184. <div id="left_column">
  185. <!--start linkList-->
  186. <div id="linkList">
  187. <ul>
  188. <li><a href=>Home</a> </li>
  189. <li><a href=>Wombat</a></li>
  190. <li><a href=>Numbat</a></li>
  191. <li><a href=>Koala</a></li>
  192. <li><a href=>Kangaroo</a></li> 
  193. </ul>
  194. <!--end linkList-->
  195. </div>
  196. <!--end left_column-->
  197. </div>
  198.  
  199. <!--start main-->
  200. <div id="main">
  201.  
  202. <H1>    HOMEPAGE </H1>
  203. <p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia.  Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>
  204. <p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia.  Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>
  205. <br>
  206. </br>
  207. <img src="/KANGA1.jpg" width="342" height="500" />
  208. <!--end main-->
  209. </div>
  210. <!--end inside_wrapper-->
  211. </div>
  212. <!--end wrapper-->
  213. </div>
  214.  
  215. <div id="footer">
  216. footer...
  217. </div>
  218.  
  219. </body>
  220.  
  221. </html>
  222.  
Any solutions would be very helpful as i am completely stuck !

Thanks

Ben
Nov 1 '06 #1
Share this Question
Share on Google+
2 Replies


P: 2
Please ignore the code above as it wasn't the right version

here is the code:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html 
  3.      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  4.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7.  
  8.  
  9. <head>
  10.  
  11. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  12.  
  13. <title>Australian Animals</title>
  14.  
  15. <style type="text/css">
  16. body
  17. {
  18. padding:0px;
  19. margin:0px;
  20. font-size: 12px;
  21. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  22. color: #3f3f3f;
  23. }
  24.  
  25. p
  26. {
  27. font-size: 12px;
  28. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  29. text-align: left;
  30. margin-left: 15px;
  31. margin-right: 15px;
  32.  
  33. H2{
  34. font-size: 10pt;
  35. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  36. color: #3f3f3f;
  37. padding-left: 10px;
  38. }
  39.  
  40. H1{
  41. font-size: 12pt;
  42. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  43. color: #3f3f3f;
  44. padding-left: 10px;
  45. }
  46.  
  47.  
  48.  
  49.  
  50. #wrapper
  51. {
  52. width:750px;
  53. /*removed for testing */
  54. margin:0 auto 0 auto;
  55.  
  56.  
  57.  
  58. background-color:#333333;
  59.  
  60. /*added for testing */
  61. height:100%;
  62. }
  63.  
  64. #notepad
  65. {
  66. width:700px;
  67. background-color:#DEDEDE;
  68. height:100%;
  69. margin:0 25px 0 25px;
  70. position:relative;
  71. }
  72.  
  73. #header
  74. {
  75. height:300px;
  76. background-image:  url(file:///N|/Ben%27s%20stuff/Header.jpg);
  77.  
  78. }
  79.  
  80. #main_menu
  81. background-color:#DEDEDE;
  82. height: 25px;
  83. }
  84.  
  85. #content
  86. background-color:#DEDEDE;
  87. position:relative;
  88. }
  89.  
  90. #main
  91. {
  92. background-color:#DEDEDE;
  93. float:right;
  94.  
  95. }
  96.  
  97. #left_column
  98. {
  99. width:200px;
  100. float:left;
  101. background-color:#DEDEDE;
  102. }
  103.  
  104. #linkList
  105. {
  106. top: 0px;
  107. padding-left: 10px;
  108. color: #3f3f3f;
  109. float:left;
  110. width: 197px;
  111. }
  112.  
  113.  
  114. #footer
  115. {
  116. display: block; 
  117. text-align: center;
  118. font-size: 10px;
  119. background: #333333; 
  120. }
  121.  
  122. li a
  123. {
  124. color:#CCCCCC;
  125. display: block;
  126. font-weight: bold;
  127. font-size: 12px;
  128. text-transform: none;
  129. padding: 2px 0 3px 0;
  130. }
  131.  
  132. li a.c
  133. {
  134. font-size:12px;
  135. font-weight: normal;
  136. display: inline;
  137. padding: 0;
  138. text-transform: uppercase;
  139. }
  140.  
  141. ul,li
  142. {
  143. list-style: none;
  144. padding: 0;
  145. margin: 0;
  146. }
  147.  
  148. li
  149. {
  150. color:#CCCCCC;
  151. background: #3f3f3f;
  152. padding: 5px 7px;
  153. border-bottom: 1px solid #dedede; 
  154. text-transform: uppercase; 
  155. font-size: 9px;
  156. }
  157.  
  158. li:hover
  159. {
  160. background: #7D7D7D; 
  161. </style>
  162. </head>
  163.  
  164. <body>
  165. <div id="wrapper">
  166. <div id="notepad">
  167. <div id="header">
  168. </div>
  169.  
  170. <div id="main_menu">
  171. <h2><a href=>Homepage</a>&gt;</h2>
  172. </div>
  173.  
  174. <div id="content">
  175. <div id="left_column">
  176. <div id="linkList">
  177. <ul>
  178. <li><a href=>Home</a> </li>
  179. <li><a href=>Wombat</a></li>
  180. <li><a href=>Numbat</a></li>
  181. <li><a href=>Koala</a></li>
  182. <li><a href=>Kangaroo</a></li> 
  183. </ul>
  184. </div>
  185. </div>
  186. <div id="main">
  187.  
  188. <H1>    HOMEPAGE </H1>
  189. <p>Australian Animals is a website for people that want to find out more information about Australia’s Unique wildlife. Information can be found on Koala’s, Numbat’s, Kangaroo’s and Wombat’s. Each of these page’s contains some general information on the animal and where you may find them whether in their natural habitat or at zoo’s around Australia.  Each page also contains further information on conservation efforts for each of these animals. Please click on a link on the menu to the left to find information on the corresponding animal. </p>
  190.  
  191. <br>
  192. </br>
  193. <img src="file:///I|/Documents%20and%20Settings/Ben/My%20Documents/1Assignment%204/KANGA1.jpg" width="342" height="500" />
  194. </div>
  195. </div>
  196. </div>
  197. <div id="footer">
  198. footer...
  199. </div>
  200. </div>
  201. </body>
  202.  
  203. </html>
  204.  
Nov 1 '06 #2

drhowarddrfine
Expert 5K+
P: 7,435
As usual, the problem is IE and I am seeing this problem brought up constantly. This is a IE bug. Divs are NOT to expand to enclose floated elements. Firefox and Opera are performing correctly. If you want the div to expand, then you must add overflow:auto; to your #notepad div.

I need to warn you about using upper-case in your code. Case matters in xhtml and css.
Nov 1 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.