Make your own free website on Tripod.com

We Changed our name and moved here

http://JamStewonline.Tripod.com

Title Here

This is a 3 column layout with Title area all created using CSS.

More content here it will also auto stretch with the content you add into this space
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.

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

<body bgcolor="#FFFFFF" text="#000000">
<div class="top" >
<h2>Title Here</h2>
</div>
<div class="rightcontent">Your Content here<br></div>

<div class="leftcontent"> Your Content here</div>

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



This layout created by Jwac Productions