0

Okay,

- Revision 1 - better placement of footer -


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->

<html>

<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>


<body>

<div id="pagewrap">
<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>

<!-- Main Section -->

<div id="container">

<div id="content">

<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>

<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->

<p>
Test content goes here.
</p>
<p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p>


</div> <!-- content -->


<div class="clear">&nbsp</div>
</div> <!-- container -->

<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->

<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>

<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>

<div class="clear">&nbsp</div>


<!-- Footer Section -->
<div id="pagefooter">
Page Footer content
</div> <!--pagefooter-->

<div class="clear">&nbsp</div>

</div> <!--pagewrap-->


</body>

</html>

/* You didn't include HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for text-size: 75%; */
font-size: 11px;
/* helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}

body
{
MARGIN: 0;
padding: 0;
background-color: #abcdef;
}

#pagewrap
{
background-color: #ffffff;
/* Standard compliant (Non-IE) Browsers only - MFF, NN, Opera etc. */
min-width: 770px;
}

#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}


#container
{
/* This is a Variable figure - it should be equal to the size of your footer content and the height of #pagefooter! */
margin: 0 0 2em 0;
padding: 0;
clear: both;
float: left;
width: 100%;
height: auto;
/* IE Bug Fix - # Hack may only work for IE 5/6 - 7 doesn't need it */
#zoom: 1;
}


#content
{
height: 100%;
margin-left: 150px;
padding: 0;
position: relative;
/* IE Bug Fix - prevents 3px Jog */
#display: inline-block;
}


#leftcol
{
float: left;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
}


#leftcol ul
{
/* Wheres the other value ??? you have three... which means T R B... no Left! */
margin: 5px;
padding: 0;
border: #cccccc 1px solid;
list-style: none;
background-color: #ffffff
}


#leftcol a, #leftcol a:visited
/* As there is no difference between a Link and a Visited:Link, you can put them together! */
{
margin: 0;
padding: 0;
color: #000000;
text-decoration: none;
display: block;
width: 138px;
vertical-align: bottom;
line-height: 2em;
}

/*
There really should be a difference when interacting with a Link.
This permits people to "know" that they are workig with a Link.
Though changing BG is okay... you may want to think about those with color-vision issues.
- Focus is used so that keyboard-users can use the "Tab Key".
- Active is used as IE doesn't work with Focus.

#leftcol a:active, #leftcol a:hover, #leftcol a:focus
{
background-color: #abcdef;
text-decoration: underline;
}
*/

#pagefooter
{
border-top: 2px solid #abcdef;
/* This is a Variable figure - it should be equal to the size of it's content and matchthe bottom margin in #container! */
height: 2em;
}

img
/* IE Bug Fix - Images in the markup withany space after results in a "gap" in IE */
{
display: block;
}


.clear
/* This is to handle floats being contained.
Thechnically, a float is no longer part of the normal document flow - so they can overlap!
By placing a div within the parent, after the floated children - and making it clear:both, it forces the parent to "stretch" :) */
{
clear: both;
font-size: 1px;
line-height: 1px;
}

p
{
margin: 0;
padding: 5px 0;
}

0

Actually, the screen height is not defined in all browsers in that manner. The height attribute of the body tag is the height of the document, not the height of the browser window.

You can use JavaScript to get the pixel size from document.body.clientHeight as the browser sees it, and then poke these values into the height or minHeight attributes of an object on the page

0

By "pixel size", I mean the number of pixels in the height of the current browser window. I got clobbered by a phone call while editing, saved out, and was unable to change it afterwards it due to the stupid half-hour rule.

0

Java Script method is bad either its just that diffrent browsers need diffrent commands.

0

well for the time being I now dont care about the height.

Almost all of my problems are solved so I am happy.

though I will look into how I can set the size of the container to the size of the screen without over flowing later.

Enough with the layout. Got to make the website now. :)

0

...MidiMagic...
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.

He wanted it to touch the bottom of the screen. That is the impossible part.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.