Make your own free website on Tripod.com

We Changed our name and moved here

http://jamstewonline.tripod.com

Content goes here. If there is anything This will auto stretch with the content. Allowing it to grow as much as needed.
Main content here it too auto stretches with the content. It will also expand and contract depending on users screen size. Go ahead re-size your browser and watch it change.

This layout uses about 90% CSS. The Title area is a table that is dynamically made using an external javascript file. This file is used for ease of updating more than one page at a time.

Here is what it looks like:
document.write("<table width='100%' border='1' cellspacing='0' bordercolor='#000000' cellpadding='10'><tr><td><h1>Title here.<h1><h3>This is a 2 column layout with the layout auto expanding to users screen size.</h3></td></tr></table>")

Also if you are making multiple pages you may want to make the CSS an external file also allowing for instant update to all pages by only changing one file.

Don't Expect this layout to be pixel perfect for every browser. You may notice a shift of about 1 pixel in some versions. We have added a work around for this due to a bug in IE5+ we found at www.glish.com . The additional style html>body #mc is used to prevent the left content from overlapping the maincontent area in browser other than IE5+.

This layout will not work for NS4 users but has been tested and should work properly in IE5+, NS6+, Mozilla1+ and Opera6+. If you design your site just right NS4 users will be able to use your site as the content will cascade down the left side of the page. It will not contain any of the styles but the main content should be readable.

Here is the source code needed to create this layout.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.leftcontent
{
background-color: #CCCC66;
border: 1px #000000 solid;
position: absolute;
left: 10px;
width: 150px;
padding: 5px
}
.maincontent
{
background-color: #CC9999;
border: 1px #000000 solid;
margin-left: 150px;
padding: 10px;
voice-family: "\"}\"";
margin-left: 149px;
}
html>body #mc
{
margin-left: 163px;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<script src="Yourfile.js">
</script>
<div class="leftcontent"> Your content here</div>

<div id="mc" class="maincontent" style="">Your content here</div>
</body>
</html>

Don't forget to create the External javascript file for the top title area.

This layout created by Jwac Productions