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

Content Div Auto Height

P: 1
Hello,

I've found a few postings of this problem but none of the answers seem to fix my problem. I have a content div wrapped around a left floated image and a right floated table. I want the table to dictate the height to the content div instead of popping out of the bottom of the content div. Seems pretty simple but too complicated for me I guess. If you know how to achieve this please share.

Thanks,

J

/*begin code*/

Expand|Select|Wrap|Line Numbers
  1. /*\*/
  2. * html .minwidth, * html .container, * html .content, * html .layout  {
  3.     height:1px;
  4. }
  5. /**/
  6.  
  7. * html .minwidth {
  8.     padding-left:800px; /* CHANGED MARGIN TO PADDING */ 
  9. }
  10.  
  11. * html .container {
  12.     margin-left:-800px;
  13.     position:relative; /* ADDED */    
  14. }
  15.  
  16. .width {
  17.     width:90%;
  18.     min-width:800px; /* CHANGED TO REMOVE BACKGROUND COLOR */
  19.     border:3px solid green;
  20.     margin:10px auto;
  21. }
  22.  
  23. .container
  24. {
  25. border: 3px solid red;
  26. }
  27.  
  28. #top
  29. {
  30. width: auto;
  31. height: auto;
  32. border: 3px solid blue;
  33. }
  34.  
  35. #topnavcontainer
  36. {
  37. height: 98px;
  38. padding: 5px;
  39. border: 3px solid orange;
  40. }
  41.  
  42. ul
  43. {
  44. padding: 0;
  45. margin: 0;
  46. list-style: none;
  47. }
  48.  
  49. li
  50. {
  51. float: left;
  52. position: relative;
  53. padding-right: 5em;
  54. font: 12px arial, verdana, lucida, sans-serif;
  55. }
  56.  
  57. a#nosub:link
  58. {
  59. color: #9EAEBB;
  60. text-decoration: none;
  61. padding-right: 2em;
  62. background: transparent url("images/square_off.jpg") right center no-repeat;
  63. }
  64.  
  65. a#nosub:visited
  66. {
  67. color: #9EAEBB;
  68. }
  69.  
  70. a#nosub:hover
  71. {
  72. color: #49677F;
  73. text-decoration: none;
  74. background: transparent url("images/square_on.jpg") right center no-repeat;
  75. }
  76.  
  77. a#nosub:active
  78. {
  79. color: #9EAEBB;
  80. }
  81.  
  82. li
  83. {
  84. color: #9EAEBB;
  85. }
  86.  
  87. li ul
  88. {
  89. display: none;
  90. position: absolute; 
  91. top: 1em;
  92. left: 0;
  93. }
  94.  
  95. li > ul
  96. {
  97. top: auto;
  98. left: auto;
  99. }
  100.  
  101. li:hover ul, li.over ul
  102. {
  103. display: block;
  104. }
  105. //subnav style
  106. #nav li li{ margin: 0 0 .2em 0; }
  107.  
  108. #nav li li a
  109. {
  110. display: block;
  111. color: #49677F;
  112. background-color: #9EAEBB;
  113. width: 5em;
  114. padding: .2em .8em;
  115. text-decoration: none;
  116. }
  117.  
  118. #nav li li a:hover
  119. {
  120. background-color: #49677F;
  121. color: #FFF;
  122. text-decoration: none;
  123. }
  124.  
  125. #sub li a
  126. {
  127. background-image: none;
  128. }
  129.  
  130.  
  131. #content
  132. {
  133. border: 3px solid black;
  134. margin: 0px;
  135. width: auto;
  136. height: auto;
  137. }
  138.  
  139. #thumbs
  140. {
  141. border: 3px solid red;
  142. width: 202px;
  143. float: right;
  144. }
  145.  
  146. #thumblarge
  147. {
  148. border: 3px solid blue;
  149. margin: 0px;
  150. width: 520px;
  151. padding: 0px;
  152. }
  153.  
  154. #bottom
  155. {
  156. clear: both;
  157. margin: 0;
  158. border: 3px solid blue;
  159. }
  160.  
  161.  
/*end code*/
Nov 15 '07 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
Add overflow:auto; to the wrapping container's CSS. Elements are not to expand to contain floated elements.
Nov 15 '07 #2

Post your reply

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