PDA

View Full Version : Problem with div display height



jeddi
Aug 21st, 2009, 07:08 PM
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:

http://www.expert-world.com/sp/problem1.jpg


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

This is my HTML:


<!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 ?

jeddi
Aug 22nd, 2009, 06:41 AM
I just realized that knowing what is in the css
is going to be vital :rolleyes:

Here it is:


*
* 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;
}


Maybe you can see something that I have missed.

abduraooft
Aug 22nd, 2009, 06:51 AM
It's very hard to clear absolutely positioned elements, as we do in the case of floats.
So, I'd recommend to use something like http://www.bonrouge.com/2c-hf-fixed.php

jeddi
Aug 22nd, 2009, 06:34 PM
I have added a height to the central column.

I know that this is far from ideal, but it
seems to be working.

css:


.center_column_nar {
position:relative;
width:535px;
height:700px;
margin:0 0 0 200px;
padding:0 0 0 10px;
border-left:1px solid #999999;
}

Is it going to cause problems ?