Sample Menu

Make Template

Scrollbar Colors

Feedback Form

Fake Link

Fake Link

Fake Link

Fake Link

Fake Link

Heading 1

Heading 2

Heading 3

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah









Code Shown Below:

Both files (style.css and index.html) must be in the same folder (directory).

style.css

body { background-color: ;
font-family:, Arial, Helvetica, sans-serif;
font-size:px;
color:;
}

a:hover { font-family:, Arial, Helvetica, sans-serif;
color:;
background-color: white}

h1 { font-family:, Arial, Helvetica, sans-serif;
font-size:24px}

h2 { font-family:, Arial, Helvetica, sans-serif;
font-size:18px}

h3 { font-family:, Arial, Helvetica, sans-serif;
font-size:12px}

#leftcontent { position: absolute;
left:10px;
top:27px;
width:px;
background:;
border:px solid ;
}

#centercontent { top:27px;
background:;
margin-left:-1px;
margin-right:-1px;
border:px solid ;
voice-family: "
\"
}

\"
"
;
voice-family: inherit;
margin-left:1px;
margin-right:1px;
}

html>
body #centercontent { margin-left:1px;
margin-right:1px;
}

#rightcontent { position: absolute;
right:10px;
top:27px;
width:px;
background:;
border:px solid ;
}

#banner { background:;
height:px;
border-top: solid ;
border-right: solid ;
border-left: solid ;
voice-family: "
\"
}

\"
"
;
voice-family: inherit;
height:-1px;
}

html>
body #banner { height:-1px;
}

p,h1,h2,h3 { margin:0px 10px 10px 10px;
}

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
3 column CSS template </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="robots" content="noarchive" />
<meta name="keywords" content=" keywords here - SOME search engines still use them - and all search links count " />
<meta name="description" content="Short description - often used by search engines as real description" />
</head>
<body>
<div id="banner">
<p align="center">
<b>
Banner or Heading text here. Warning: the size of the heading or the height of the banner image will affect the top of left and right column. Therefore you will likely have to adjust the Top value in the style section - for the leftcontent and rightcontent. i.e. the size of the text may cause a gap - So finalize the banner then set the column tops.</b>
<br />
</p>
</div>
<div id="leftcontent">
<p align="center">
<br />
Sample Menu<br />
<br />
<a href="http://www.maketemplate.com">
Make Template</a>
<br />
<br />
<a href="http://www.maketemplate.com/scrollbar/">
Scrollbar Colors</a>
<br />
<br />
<a href="http://www.maketemplate.com/feedback/">
Feedback Form</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
<br />
<br />
<a href="index.php">
Fake Link</a>
</p>
</div>
<div id="centercontent">
<h1 align="center">
Heading 1</h1>
<h2 align="center">
Heading 2</h2>
<h3 align="center">
Heading 3</h3>
<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
<p>
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
</div>
<div id="rightcontent">
<p align="center">
<br />
<p align="center">
<img src="sample.jpg" alt="alt stuff here" />
<br />
<br />
<img src="sample.jpg" alt="alt stuff here" />
<br />
<br />
<img src="sample.jpg" alt="alt stuff here" />
<br />
<br />
</p>
</div>
</body>
</html>