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

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > css flow error
+ 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.  
  21. H2{
  22. font-size: 10pt;
  23. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  24. color: #3f3f3f;
  25. padding-left: 10px;
  26. }
  27.  
  28. H1{
  29. font-size: 12pt;
  30. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  31. color: #3f3f3f;
  32. padding-left: 10px;
  33. }
  34.  
  35.  
  36.  
  37.  
  38. #wrapper
  39. {
  40. width:750px;
  41. /*removed for testing */
  42. margin:0 auto 0 auto;
  43. position:relative;
  44.  
  45.  
  46. background-color:#333333;
  47.  
  48. /*added for testing
  49. height:100%; */
  50. }
  51.  
  52. #inside_wrapper
  53. {
  54. width:700px;
  55. background-color:#DEDEDE;
  56. /*height:100%;*/
  57. margin:0 25px 0 25px;
  58. }
  59.  
  60. #header
  61. {
  62. top:0px;
  63. left:0px;
  64. height:300px;
  65. background-image:  url(/Header.jpg);
  66.  
  67. }
  68.  
  69. #main_menu
  70. { 
  71. background-color:red;
  72. height: 25px;
  73. width:700px;
  74. }
  75.  
  76. #content
  77. { 
  78. width:700px;
  79. background-color:#DEDEDE;
  80. position:relative;
  81. }
  82.  
  83. #main
  84. {
  85. top:25px;
  86. right:0px;
  87. width:500px;
  88. background-color:#DEDEDE;
  89. float:right;
  90.  
  91. }
  92.  
  93. #left_column
  94. {
  95. top:25px;
  96. width:200px;
  97. float:left;
  98. background-color:#DEDEDE;
  99. /*height:700px;*/
  100. }
  101.  
  102. #linkList
  103. {
  104. top: 0px;
  105. padding-left: 10px;
  106. color: #3f3f3f;
  107. float:left;
  108. width: 197px;
  109. }
  110.  
  111.  
  112. #footer
  113. {
  114. display: block; 
  115. text-align: center;
  116. font-size: 10px;
  117. background: #333333; 
  118. }
  119.  
  120. li a
  121. {
  122. color:#CCCCCC;
  123. display: block;
  124. font-weight: bold;
  125. font-size: 12px;
  126. text-transform: none;
  127. padding: 2px 0 3px 0;
  128. }
  129.  
  130. li a.c
  131. {
  132. font-size:12px;
  133. font-weight: normal;
  134. display: inline;
  135. padding: 0;
  136. text-transform: uppercase;
  137. }
  138.  
  139. ul,li
  140. {
  141. list-style: none;
  142. padding: 0;
  143. margin: 0;
  144. }
  145.  
  146. li
  147. {
  148. color:#CCCCCC;
  149. background: #3f3f3f;
  150. padding: 5px 7px;
  151. border-bottom: 1px solid #dedede; 
  152. text-transform: uppercase; 
  153. font-size: 9px;
  154. }
  155.  
  156. li:hover
  157. {
  158. background: #7D7D7D; 
  159. } 
  160. </style>
  161. </head>
  162.  
  163. <body>
  164. <!--start wrapper-->
  165. <div id="wrapper">
  166.  
  167. <!--start inside_wrapper-->
  168. <div id="inside_wrapper">
  169.  
  170. <!--start header-->
  171. <div id="header">
  172.  
  173. <!--end header-->
  174. </div>
  175.  
  176.  
  177.  
  178. <!--start mainmenu-->
  179. <div id="main_menu">
  180. <h2><a href=>Homepage</a>&gt;</h2>
  181. <!--end mainmenu-->
  182. </div>
  183.  
  184. <!--start content-->
  185. <div id="content">
  186.  
  187. <!--start left_column-->
  188. <div id="left_column">
  189. <!--start linkList-->
  190. <div id="linkList">
  191. <ul>
  192. <li><a href=>Home</a> </li>
  193. <li><a href=>Wombat</a></li>
  194. <li><a href=>Numbat</a></li>
  195. <li><a href=>Koala</a></li>
  196. <li><a href=>Kangaroo</a></li> 
  197. </ul>
  198. <!--end linkList-->
  199. </div>
  200. <!--end left_column-->
  201. </div>
  202.  
  203. <!--start main-->
  204. <div id="main">
  205.  
  206. <H1>    HOMEPAGE </H1>
  207. <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>
  208. <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>
  209. <br>
  210. </br>
  211. <img src="/KANGA1.jpg" width="342" height="500" />
  212. <!--end main-->
  213. </div>
  214. <!--end inside_wrapper-->
  215. </div>
  216. <!--end wrapper-->
  217. </div>
  218.  
  219. <div id="footer">
  220. footer...
  221. </div>
  222.  
  223. </body>
  224.  
  225. </html>
  226.  
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.  
  34. H2{
  35. font-size: 10pt;
  36. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  37. color: #3f3f3f;
  38. padding-left: 10px;
  39. }
  40.  
  41. H1{
  42. font-size: 12pt;
  43. font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
  44. color: #3f3f3f;
  45. padding-left: 10px;
  46. }
  47.  
  48.  
  49.  
  50.  
  51. #wrapper
  52. {
  53. width:750px;
  54. /*removed for testing */
  55. margin:0 auto 0 auto;
  56.  
  57.  
  58.  
  59. background-color:#333333;
  60.  
  61. /*added for testing */
  62. height:100%;
  63. }
  64.  
  65. #notepad
  66. {
  67. width:700px;
  68. background-color:#DEDEDE;
  69. height:100%;
  70. margin:0 25px 0 25px;
  71. position:relative;
  72. }
  73.  
  74. #header
  75. {
  76. height:300px;
  77. background-image:  url(file:///N|/Ben%27s%20stuff/Header.jpg);
  78.  
  79. }
  80.  
  81. #main_menu
  82. { 
  83. background-color:#DEDEDE;
  84. height: 25px;
  85. }
  86.  
  87. #content
  88. { 
  89. background-color:#DEDEDE;
  90. position:relative;
  91. }
  92.  
  93. #main
  94. {
  95. background-color:#DEDEDE;
  96. float:right;
  97.  
  98. }
  99.  
  100. #left_column
  101. {
  102. width:200px;
  103. float:left;
  104. background-color:#DEDEDE;
  105. }
  106.  
  107. #linkList
  108. {
  109. top: 0px;
  110. padding-left: 10px;
  111. color: #3f3f3f;
  112. float:left;
  113. width: 197px;
  114. }
  115.  
  116.  
  117. #footer
  118. {
  119. display: block; 
  120. text-align: center;
  121. font-size: 10px;
  122. background: #333333; 
  123. }
  124.  
  125. li a
  126. {
  127. color:#CCCCCC;
  128. display: block;
  129. font-weight: bold;
  130. font-size: 12px;
  131. text-transform: none;
  132. padding: 2px 0 3px 0;
  133. }
  134.  
  135. li a.c
  136. {
  137. font-size:12px;
  138. font-weight: normal;
  139. display: inline;
  140. padding: 0;
  141. text-transform: uppercase;
  142. }
  143.  
  144. ul,li
  145. {
  146. list-style: none;
  147. padding: 0;
  148. margin: 0;
  149. }
  150.  
  151. li
  152. {
  153. color:#CCCCCC;
  154. background: #3f3f3f;
  155. padding: 5px 7px;
  156. border-bottom: 1px solid #dedede; 
  157. text-transform: uppercase; 
  158. font-size: 9px;
  159. }
  160.  
  161. li:hover
  162. {
  163. background: #7D7D7D; 
  164. } 
  165. </style>
  166. </head>
  167.  
  168. <body>
  169. <div id="wrapper">
  170. <div id="notepad">
  171. <div id="header">
  172. </div>
  173.  
  174. <div id="main_menu">
  175. <h2><a href=>Homepage</a>&gt;</h2>
  176. </div>
  177.  
  178. <div id="content">
  179. <div id="left_column">
  180. <div id="linkList">
  181. <ul>
  182. <li><a href=>Home</a> </li>
  183. <li><a href=>Wombat</a></li>
  184. <li><a href=>Numbat</a></li>
  185. <li><a href=>Koala</a></li>
  186. <li><a href=>Kangaroo</a></li> 
  187. </ul>
  188. </div>
  189. </div>
  190. <div id="main">
  191.  
  192. <H1>    HOMEPAGE </H1>
  193. <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>
  194.  
  195. <br>
  196. </br>
  197. <img src="file:///I|/Documents%20and%20Settings/Ben/My%20Documents/1Assignment%204/KANGA1.jpg" width="342" height="500" />
  198. </div>
  199. </div>
  200. </div>
  201. <div id="footer">
  202. footer...
  203. </div>
  204. </div>
  205. </body>
  206.  
  207. </html>
  208.  
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.

Question stats

  • viewed: 1301
  • replies: 2
  • date asked: Nov 1 '06
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates