Practical Web Programming

Thursday, September 13, 2007

Two Column CSS Webpage Template

This is a complete source codes for a two-column webpage template. This is written in CSS. I made the background of each column gray to highlight each column. See the source code below.

<html>
<head>
<title>CSS Two Column</title>
<style type="text/css">
#wrapper{
margin: 0 auto;
text-align: center;}

#outer{
width: 800px;
margin: 0 auto;
text-align: left;
border: 0px solid #F00;}

#banner{
margin: 5px 0;
border: 1px solid white;
text-align: center;
background-color: gray;}

#inner{
margin: 0 auto;
border: 1px solid white;
text-align: center;}

#content{
float: left;
width: 600px;
margin: 0 -600px 0 5px;
padding: 5px;
text-align: left;
background-color: gray;
border: 1px solid white;}

#left-sidebar{
float: left;
width: 170px;
margin: 0;
padding: 5px;
text-align: left;
background-color: gray;}

#footer{
clear: both;
margin: 0;
padding: 0;
text-align: center;
background-color: gray;}
</style>
</head>

<body>
<div id="wrapper">
<div id="outer">
<div id="banner">
<h1>Your Logo Here...</h1>
</div>
<div id="inner">
<div id="left-sidebar">
<h2>Left Sidebar</h2>
left sidebar<br />
left sidebar<br />
left sidebar<br />
left sidebar<br />
left sidebar<br />
</div>
<div id="content">
<h2>Content</h2>
This is where your content goes...<br />
This is where your content goes...<br />
This is where your content goes...<br />
This is where your content goes...<br />
This is where your content goes...<br />
</div>

<div id="footer">
<p>footer</p>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments:

Recent Post