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

Problem with div display height

100+
P: 290
Hi,

I have been tinkering with this for a few hours now, but I just can not see why
the left hand side column extends past my footer div.

You can see what I mean here:



What I want is for the footer to be lower so that it includes all of the
left column text.

This is my HTML:


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  "http://www.w3.org/TR/html4/loose.dtd">
  3.  
  4. <html>
  5. <head>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  7. <meta name="description" content="special offer on support focus">
  8. <meta name="keywords" content="special offer on support focus">
  9. <link rel="stylesheet" type="text/css" href="support.css" media="screen">
  10. <link rel="stylesheet" type="text/css" href="print.css" media="print">
  11. <link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">
  12. <title>Support Focus</title>
  13.  
  14. <script type="text/javascript" src="external.js"> 
  15. </script>
  16.  
  17. </head>
  18.  
  19. <body>
  20. <div class="top" ></div>
  21.  
  22. <div class="page_wrap clearfix" style="background-color:white;"> <!-- Closed in FOOT -->
  23.  
  24.   <div class="header">
  25.     <div class="header_block">
  26.       <div class="logo"><img alt="logo" src="img/logo1.gif">
  27.       </div>
  28.        <h1>Support-Focus.com</h1>
  29.  
  30.        <h2>    providing the internets' best support service.</h2>
  31.     </div>  <!-- END header_block -->
  32.   </div> <!-- END header -->
  33.  
  34.   <div class="navbar" id="nav">
  35.     <ul>
  36.        <li><a href="index.php">Home</a></li>
  37.  
  38.       <li><a href="works.php">How it works</a></li>
  39.       <li><a href="pricing.php">Pricing</a></li>
  40.             <li><a href="control.php">Control Panel</a></li>    
  41.       <li><a href="contact.php">Contact</a></li>
  42.           <li><a href="logout.php"> Safe Log-Out</a></li>
  43.             <li><a ><span style="color:blue;font-weight: bold;">Welcome back: Saikii Chong </span></a></li>                
  44.    </ul>
  45.  
  46.   </div>
  47. <div class="container clearfix">
  48.     <div class="left_column">
  49.                <img alt='Saikii Chong photo' 
  50.                title='Saikii Chong photo' 
  51.                src='/mem_images/saikii-chong.jpg' 
  52.                  width="120px" height="120px" >
  53.                  <br>
  54.                  <br>
  55.                  <b>Member Profile: </b><br>
  56.                  My name is Saikii Chong and I work full time as a dental assistant in Singapore. For the past two years I have been building up my online income. As my interest is dentistry, I have a few websites on that subject.<br>
  57.  
  58. <br>
  59. I get most of my income through affiliate commissions from the blogs that I have set up. My goal is to earn enough online income to enable my to reduce my hours of work. <br>
  60. <br>
  61. To be honest I enjoy the work I do in our dental practice so I do not intend to give it up completely, but I do want to become financially independent. <br>
  62. <br>
  63. I am definitely on my way, and one of the products that really helped me is the 30 Day Bum Marketing Plan. This course changed my whole approach to article marketing and has helped me to increase my income. <br>
  64. <br>
  65. I recommend it to everyone! <br>
  66.          </div>
  67.     <div class="center_column">
  68.       <h2>Control Panel</h2>
  69.  
  70.            <p><span class ="sub_head1">Update Your Profile Image</span><br>
  71.              </p>
  72.              <p>In order for your profile to nicely slot into the space on the page, please write between 600 and 800 characters.
  73.           <br><br>
  74.             </p>
  75.                        <div class="input_fm">
  76.         <form name="main_fm" enctype ="multipart/form-data" action ='write_profile_pic.php' method = 'POST'>
  77.          <input type = 'hidden' name='pict_run' value="yes">
  78.                  <input type="hidden" name ="MAX FILE SIZE" value="2000000">
  79.  
  80.                  <div class="form_top">
  81.                       <div class="upld_image">
  82.                             <b>Your Profile Image:</b><br>
  83.                             <input type="file" size="50" id = "u1" name="upLoad1" onchange="showName(1)">
  84.                             <span class="form_top1" ><br>
  85.                             Or ... keep existing image:
  86.                             <select name="x_live_cd" >
  87.  
  88.                                           <option value = y selected= "selected" >Yes &nbsp;&nbsp;</option><option value = n>No &nbsp;&nbsp;</option>                            </select>
  89.  
  90.                             </span>
  91.                             <br><br>
  92.                             <input type="button" value ="Clear" onclick="document.main_fm.upLoad1.value='';document.main_fm.fName1.value='';">
  93.                             <br><br>
  94.                             <span>Select an image from your computer </span>
  95.                             <br><br>
  96.                             <input type="submit" value="Complete Profile Update"
  97.                             onclick="show_ticker(); ScrollMarquee()">
  98.  
  99.                             </div> <!-- end div upld_image -->
  100.  
  101.            </div>  <!-- end div form_top -->
  102.         </form>
  103.  
  104.              <div id="ticker" style='position:absolute; left:200px; top:660px' >
  105.          <CENTER> 
  106.            <FORM name="marquee1" action ="#"> 
  107.                    <INPUT name="text" SIZE="100"
  108.                    VALUE=" >>>>>>......>>>>>>......>>>>>>......>>>>>>......>>>>>>...... Your profile image is now being transferred to the your Expert Profile Page. This takes a few moments so please be patient. When completed, your profile will have been updated .............. just a few moments more ............... not long now .............. please be patient .............. Thank you."> 
  109.                  </FORM> 
  110.              </CENTER> 
  111.           </div>
  112.         </div>  <!-- end div input_fm --> 
  113.   </div> <!-- end div center_column -->
  114.  
  115. </div> <!-- end div container clearfix -->
  116. <div class="footer"  style="text-align:left;">
  117.   <div class="navbar" id="nav_bot">
  118.     <center>
  119.          <ul>
  120.           <li><a href="special.php">Terms</a></li>    
  121.             <li><a href="special.php">Privacy Policy</a></li>
  122.             <li><a href="special.php">Earnings Disclaimer</a></li>    
  123.          </ul>
  124.  
  125.         </center>
  126.   </div>
  127.   <div class="bottom"></div>
  128. </div>
  129.  
  130. </div>  <!-- END page_wrap clearfix (in a_head or mem_head) -->
  131. </body>
  132. </html>

The code validates, and I have gone over it again and again
but I can see what I have done wrong.

Any ideas ?
Aug 21 '09 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
This is a css problem but you don't show the css. Chances are, the element is floated. Parent elements are never to expand to contain floated elements.

But maybe not. Can't tell without the complete markup.
Aug 21 '09 #2

100+
P: 290
Thanks for replying.

The offending div does not appear to be floated,

Here is the css:

Expand|Select|Wrap|Line Numbers
  1. *  support.css
  2. */
  3.  
  4. /* general page structure and layout */
  5. body {
  6. font-family:Arial, Helvetica, sans-serif;
  7. font-size:.8em; 
  8. color:#000000; 
  9. margin:20px 0 0 0;
  10. padding:0 0 0 0;
  11. background:#ffffff;
  12. text-align:center;
  13. }
  14.  
  15. .top {
  16. margin:0 auto;
  17. padding:0 0 0 0;
  18. width:780px;
  19. height:9px;
  20. background:#ffffff url(img/page_top2.jpg) no-repeat;
  21. }
  22.  
  23. .page_wrap {
  24. /* includes the header, main body content and the footer */
  25. margin:0 auto;
  26. padding:0 0 0 0;
  27. width:780px;
  28. background:#ffffff url(img/body_bg.jpg) repeat-y;
  29. text-align:center;
  30. }
  31.  
  32. .header {
  33. position:relative;
  34. margin:0 0 0 0 !important;
  35. margin:-7px 0 0 0;
  36. padding:0 0 0 ;
  37. width:780px !important;
  38. width:742px;
  39. height:125px;
  40. background:#ffffff;
  41. text-align:left;
  42. }
  43.  
  44. .header_block {
  45. position:relative;
  46. margin:0 20px 0 20px;
  47. padding:0 0 0 0;
  48. width:740px;
  49. background:transparent;
  50. text-align:left;
  51. color:#eeeaaa;
  52. }
  53.  
  54. .logo {
  55. position:relative;
  56. float:right;
  57. margin:3px 10px 0 0;
  58. padding:0 0 0 0;
  59. }
  60.  
  61. .navbar {
  62. position:relative;
  63. margin:0 0 0 0;
  64. padding:0 0 0 0;
  65. width:780px !important;
  66. width:742px;
  67. height:39px;
  68. background:#ffffff url(img/nav_bg2.jpg);
  69. text-align:left;
  70. color:#000000;
  71. font-size:.9em;
  72. }
  73.  
  74. .container {
  75. position:relative;
  76. margin:10px 0 0 10px;
  77. padding:0 0 0 0;
  78. width:760px !important;
  79. width:742px;
  80. background:transparent;
  81. text-align:left;
  82. }
  83.  
  84. .left_column {
  85. position:absolute;
  86. left:0;
  87. width:140px;
  88. margin:0 0 0 0;
  89. padding:0 4px 0 0;
  90. background:transparent;
  91. font-size:.9em;
  92. color:#6E312A;
  93. }
  94.  
  95. .center_column {
  96. position:relative;
  97. width:595px;
  98. margin:0 0 0 151px;
  99. padding:0 0 0 10px;
  100. border-left:1px solid #999999;
  101. }
  102.  
  103. .contact_column {
  104. position:relative;
  105. width:600px;
  106. margin:0 0 0 20px;
  107. padding:0 0 0 10px;
  108. text-align:left;
  109. }
  110.  
  111. .box_right {
  112. position:relative;
  113. float:right;
  114. width:150px;
  115. margin:0 0 3px 10px !important;
  116. margin:0 5px 3px 10px;
  117. padding:2px 5px 2px 10px;
  118. background:#eeeeee;
  119. border:1px solid #cccccc;
  120. text-align:left;
  121. color:#616161;
  122. font-size:.9em;
  123. }
  124.  
  125. .footer {
  126. position:relative;
  127. margin:0 0 0 0;
  128. padding:10px 0 0 0;
  129. width:780px;
  130. font-family:Arial, Helvetica, sans-serif;
  131. font-size:.8em;
  132. color:#6E312A;
  133. background:transparent;
  134. text-align:right;
  135. }
  136.  
  137. .footer_logo {
  138. position:relative;
  139. float:right;
  140. margin:0 0 0 15px;
  141. padding:0 0 0 0;
  142. }
  143.  
  144. #footer {
  145. /* aligns the text to the middle of the footer, in relation to the logo */
  146. vertical-align:-250%;
  147. }
  148.  
  149. .bottom {
  150. margin:0 auto;
  151. padding:0 0 0 0;
  152. width:780px;
  153. height:11px;
  154. background:#ffffff url(img/page_bottom.jpg) no-repeat top;
  155. }
  156.  
Thanks again,
Maybe you can see something that I have missed.
Aug 22 '09 #3

drhowarddrfine
Expert 5K+
P: 7,435
The left column is positioned absolutely. This removes that element from the normal flow allowing the footer to rise up.
Aug 22 '09 #4

100+
P: 290
I tred making it relative, but the center column then
goes down below where the left col is and even
when I play with the widths, it won't come up.

I added a height:700px; into the
center column, probably not a good solution, but it works.

Will it cause me problems ?

Expand|Select|Wrap|Line Numbers
  1. .center_column_nar {
  2. position:relative;
  3. width:535px;
  4. height:700px; 
  5. margin:0 0 0 200px;
  6. padding:0 0 0 10px;
  7. border-left:1px solid #999999;
  8. }
Aug 22 '09 #5

Post your reply

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