Problem with div display height

290 Contributor

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

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<meta name="description" content="special offer on support focus">

<meta name="keywords" content="special offer on support focus">

<link rel="stylesheet" type="text/css" href="support.css" media="screen">

<link rel="stylesheet" type="text/css" href="print.css" media="print">

<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">

<title>Support Focus</title>
 
<script type="text/javascript" src="external.js"> 

</script>
 
</head>
 
<body>

<div class="top" ></div>
 
<div class="page_wrap clearfix" style="background-color:white;"> <!-- Closed in FOOT -->
 
  <div class="header">

    <div class="header_block">

      <div class="logo"><img alt="logo" src="img/logo1.gif">

      </div>

       <h1>Support-Focus.com</h1>
 
       <h2>    providing the internets' best support service.</h2>

    </div>  <!-- END header_block -->

  </div> <!-- END header -->
 
  <div class="navbar" id="nav">

    <ul>

       <li><a href="index.php">Home</a></li>
 
      <li><a href="works.php">How it works</a></li>

      <li><a href="pricing.php">Pricing</a></li>

            <li><a href="control.php">Control Panel</a></li>    

      <li><a href="contact.php">Contact</a></li>

          <li><a href="logout.php"> Safe Log-Out</a></li>

            <li><a ><span style="color:blue;font-weight: bold;">Welcome back: Saikii Chong </span></a></li>                

   </ul>
 
  </div>

<div class="container clearfix">

    <div class="left_column">

               <img alt='Saikii Chong photo' 

               title='Saikii Chong photo' 

               src='/mem_images/saikii-chong.jpg' 

                 width="120px" height="120px" >

                 <br>

                 <br>

                 <b>Member Profile: </b><br>

                 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>
 
<br>

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>

<br>

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>

<br>

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>

<br>

I recommend it to everyone! <br>

         </div>

    <div class="center_column">

      <h2>Control Panel</h2>
 
           <p><span class ="sub_head1">Update Your Profile Image</span><br>

             </p>

             <p>In order for your profile to nicely slot into the space on the page, please write between 600 and 800 characters.

          <br><br>

            </p>

                       <div class="input_fm">

        <form name="main_fm" enctype ="multipart/form-data" action ='write_profile_pic.php' method = 'POST'>

         <input type = 'hidden' name='pict_run' value="yes">

                 <input type="hidden" name ="MAX FILE SIZE" value="2000000">
 
                 <div class="form_top">

                      <div class="upld_image">

                            <b>Your Profile Image:</b><br>

                            <input type="file" size="50" id = "u1" name="upLoad1" onchange="showName(1)">

                            <span class="form_top1" ><br>

                            Or ... keep existing image:

                            <select name="x_live_cd" >
 
                                          <option value = y selected= "selected" >Yes &nbsp;&nbsp;</option><option value = n>No &nbsp;&nbsp;</option>                            </select>
 
                            </span>

                            <br><br>

                            <input type="button" value ="Clear" onclick="document.main_fm.upLoad1.value='';document.main_fm.fName1.value='';">

                            <br><br>

                            <span>Select an image from your computer </span>

                            <br><br>

                            <input type="submit" value="Complete Profile Update"

                            onclick="show_ticker(); ScrollMarquee()">
 
                            </div> <!-- end div upld_image -->
 
           </div>  <!-- end div form_top -->

        </form>
 
             <div id="ticker" style='position:absolute; left:200px; top:660px' >

         <CENTER> 

           <FORM name="marquee1" action ="#"> 

                   <INPUT name="text" SIZE="100"

                   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."> 

                 </FORM> 

             </CENTER> 

          </div>

        </div>  <!-- end div input_fm --> 

  </div> <!-- end div center_column -->
 
</div> <!-- end div container clearfix -->

<div class="footer"  style="text-align:left;">

  <div class="navbar" id="nav_bot">

    <center>

         <ul>

          <li><a href="special.php">Terms</a></li>    

            <li><a href="special.php">Privacy Policy</a></li>

            <li><a href="special.php">Earnings Disclaimer</a></li>    

         </ul>
 
        </center>

  </div>

  <div class="bottom"></div>

</div>
 
</div>  <!-- END page_wrap clearfix (in a_head or mem_head) -->

</body>

</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

Subscribe Reply

3890

drhowarddrfine

7,435

Recognized Expert Expert

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

jeddiki

290

Contributor

Thanks for replying.

The offending div does not appear to be floated,

Here is the css:

Expand|Select|Wrap|Line Numbers

 * 

*  support.css

*/
 
/* general page structure and layout */

body {

font-family:Arial, Helvetica, sans-serif;

font-size:.8em; 

color:#000000; 

margin:20px 0 0 0;

padding:0 0 0 0;

background:#ffffff;

text-align:center;

}
 
.top {

margin:0 auto;

padding:0 0 0 0;

width:780px;

height:9px;

background:#ffffff url(img/page_top2.jpg) no-repeat;

}
 
.page_wrap {

/* includes the header, main body content and the footer */

margin:0 auto;

padding:0 0 0 0;

width:780px;

background:#ffffff url(img/body_bg.jpg) repeat-y;

text-align:center;

}
 
.header {

position:relative;

margin:0 0 0 0 !important;

margin:-7px 0 0 0;

padding:0 0 0 ;

width:780px !important;

width:742px;

height:125px;

background:#ffffff;

text-align:left;

}
 
.header_block {

position:relative;

margin:0 20px 0 20px;

padding:0 0 0 0;

width:740px;

background:transparent;

text-align:left;

color:#eeeaaa;

}
 
.logo {

position:relative;

float:right;

margin:3px 10px 0 0;

padding:0 0 0 0;

}
 
.navbar {

position:relative;

margin:0 0 0 0;

padding:0 0 0 0;

width:780px !important;

width:742px;

height:39px;

background:#ffffff url(img/nav_bg2.jpg);

text-align:left;

color:#000000;

font-size:.9em;

}
 
.container {

position:relative;

margin:10px 0 0 10px;

padding:0 0 0 0;

width:760px !important;

width:742px;

background:transparent;

text-align:left;

}
 
.left_column {

position:absolute;

left:0;

width:140px;

margin:0 0 0 0;

padding:0 4px 0 0;

background:transparent;

font-size:.9em;

color:#6E312A;

}
 
.center_column {

position:relative;

width:595px;

margin:0 0 0 151px;

padding:0 0 0 10px;

border-left:1px solid #999999;

}
 
.contact_column {

position:relative;

width:600px;

margin:0 0 0 20px;

padding:0 0 0 10px;

text-align:left;

}
 
.box_right {

position:relative;

float:right;

width:150px;

margin:0 0 3px 10px !important;

margin:0 5px 3px 10px;

padding:2px 5px 2px 10px;

background:#eeeeee;

border:1px solid #cccccc;

text-align:left;

color:#616161;

font-size:.9em;

}
 
.footer {

position:relative;

margin:0 0 0 0;

padding:10px 0 0 0;

width:780px;

font-family:Arial, Helvetica, sans-serif;

font-size:.8em;

color:#6E312A;

background:transparent;

text-align:right;

}
 
.footer_logo {

position:relative;

float:right;

margin:0 0 0 15px;

padding:0 0 0 0;

}
 
#footer {

/* aligns the text to the middle of the footer, in relation to the logo */

vertical-align:-250%;

}
 
.bottom {

margin:0 auto;

padding:0 0 0 0;

width:780px;

height:11px;

background:#ffffff url(img/page_bottom.jpg) no-repeat top;

}

Thanks again,
Maybe you can see something that I have missed.

Aug 22 '09 #3

drhowarddrfine

7,435

Recognized Expert Expert

The left column is positioned absolutely. This removes that element from the normal flow allowing the footer to rise up.

Aug 22 '09 #4

jeddiki

290

Contributor

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

 
.center_column_nar {

position:relative;

width:535px;
 height:700px; 

margin:0 0 0 200px;

padding:0 0 0 10px;

border-left:1px solid #999999;

}

Aug 22 '09 #5

Similar topics

533

problem

by: Mikael Hellström | last post by:

Hi all... I hava a problem . This pice of code (menu) works well with ie but don't work with netscape 6.2 .. why? Please tell me how i can get this to work. My site have the adress...

ASP / Active Server Pages

10108

html/css problem in firefox

by: ruby_bestcoder | last post by:

Hi I already posted this in the javascript group, but seemed to be the wrong place to ask. The code I will post here works in IE, but not in ff. Its basically a group of li that contain divs....

HTML / CSS

3037

Firefox problem with overflow

by: books1999 | last post by:

Hi there, I have a problem with this css/div and i cannot work it out. I would like either container to be able to push the background box to grow but in Firefox it overflows. Can someone find a...

HTML / CSS

5594

Possible Firefox CSS content problem - Refresh fixes it

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...

HTML / CSS

3126

problem display:none/block divs via JavaScript

by: cssExp | last post by:

hello, Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out,...

Javascript

3117

problem in using ajax function

by: shivendravikramsingh | last post by:

hi friends, i m using a ajax function for retrieving some values from a database table,and display the values in required field,my prob is that the ajax function i m using is working f9 once,but if...

Javascript

3100

IE7 rendering problem for image UL list navigation

by: rirby2 | last post by:

Hi everyone, I'm currently having a rendering problem in IE7 (haven't even tried the lower IEs yet), vs. what I see in FF2. The simplified site can be found at solerasd.com . (There are more...

HTML / CSS

1943

problem with simple onClick event - page seems to be refreshing

by: stevemtno | last post by:

I've got a problem with a web page I'm working on. I have 4 modules - one of them has 2 tabs, two of them have 4 tabs. When the user clicks on the tabs, the content below them changes. However, when...

Javascript

1642

width problem in IE

by: pradeepjain | last post by:

I have a 3 column layout left<->content<->right<->.I made a css and html in such a manner that when there is no left sidebar the content region starts from left side and takes whole width of left on...

HTML / CSS

2840

Game of Life. I've isolated where the problem is

by: slapsh0t11 | last post by:

So, I've been working on this Game of Life (http://www.bitstorm.org/gameoflife/) project, and all the code has been written. However, it will not run. First, I will post the error message and the...

Java

7046

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7048

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

5342

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

4783

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4485

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

2986

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1300

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

563

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

183

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General