473,320 Members | 1,719 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Content Div Auto Height

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
1 2945
drhowarddrfine
7,435 Expert 4TB
Add overflow:auto; to the wrapping container's CSS. Elements are not to expand to contain floated elements.
Nov 15 '07 #2

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

Similar topics

11
by: Not4u | last post by:
Hello, I have a problem with CSS code. I want to have one menu column with a fixed width and a 100% height and the rest of the page for content. ---------------- |.|.|<--100%-->|...
0
by: Ataru Morooka | last post by:
Hello, I am renewing a website using CSS and I have some problems with IE6. Following this link: http://www.ansv.it/templates/Template_Index_IT.dwt.asp you may notice that the container area has...
19
by: Jerry | last post by:
Hi Folks, Ok, here's my story. I was asked to create a website for the church I attend. I am a complete newbie to creating websites. So, I did the usual -- did a bunch of googling, found...
3
by: autospanker | last post by:
Ladies and Gentleman, I have been having this problem that has been driving me insane. I have a website that when viewed in Firefox first, the content in the body area is pushed down. Then when...
4
by: camphor | last post by:
hi, I have a single column webpage with a rounded corner box which is positioned on the left in which the links sit, the main content is on the right, I am trying to make the page stretch with the...
1
by: lister | last post by:
Hi, I have a div with fluid content, below which I want a scrollable div. I can't work out how to style the scrollable div to say "use the rest of the space in the container". The best I can...
9
by: Lloyd Sheen | last post by:
I have now spent the entire morning on what I think should be easy. I cannot for the life of me figure out how to make a simple one row, two column table where is the contents of the one of the...
6
by: AJM Project | last post by:
Hello, I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline...
3
by: premprakashbhati | last post by:
hi, good evening.. i am going to upload an image in a web form .....for that iam using HTML input(file) control and one web control button i.e., Upload_Button() here is the code ...its work fine...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.