<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>
<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:
Post a Comment