The finished site can be viewed HERE
First of all, we are going to create the basic HTML structure of the page which we will keep simple, a wrapper encloses the other elements which are added in a linear fashion. We add a simple navigation list to the left side bar menu use "#" as dummy links. Next add some content for the main area and a footer with a © notice. While we are here we will add a link to our style sheet in the head of the HTML file...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Two column Layout</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="wrapper"> <div id="header"></div>
<div id="left_nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
</ul>
</div>
<div id="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="footer"><p>© 2008 Your Site.com</div> </div>
</body></html>
Now we have a complete XHTML document where we can use CSS to control the layout.
First of all we will set the HTML body element to remove page margins and borders, we also set the default text size background color and font family and size.
body{
padding:0px;
margin:0px;
background-color:#bac3ca;
font-family: Arial, Helvetica, sans-serif;
color:#FFF;
}
Next we will style the wrapper div,the auto margin will center the wrapper horizontally within the page.
#wrapper{
width:800px;
border:1px solid #000;
margin: 0 auto;
background-color: #313131; }Ok lets put an image in the header, create your own or use the example one Here the background is one image applied using css with no-repeat. Now lets add the style for the side bar menu, this is floated left and a margin top right and left to make a gap between the menu and the main content.
Next we will work on the main content ,set the main content width and float it left, also add some padding to the main content.
#header{
height:127px;
background:url(images/header_image.jpg) no-repeat;
}
#left_nav{
background: #444444;
width: 165px;
padding: 20px 10px;
float: left;
margin-right: 10px;
border: 1px solid #FFF;
}
#main{
float:left;
width:560px;
padding:20px:
border:1px solid #FFF;
}
On to the footer the "clear:both" value ensure the div's clear floated content.
#footer{
height:30px;
clear:both;
margin-top:10px;
border: 1px solid #FFF;
background: #444444;
text-align:center;
padding-top:10px;
}
Now its time to style the navigation, we will remove bullets from the list and display the links as a block for our rollover menu.
#left_nav ul{
list-style-type:none;
padding:0;
margin:0;
}
#left_nav li{
margin-bottom:10px;
}
#left_nav a{
border:1px solid #FFF;
background-color:#313131;
display:block;
color:#FFFFFF;
text-decoration:none;
padding:5px 0 5px 55px;
}
#left_nav a:hover{
background-color:#444444;
text-transform:uppercase;
}
#left_nav a:active{
background-color:#303030;
}
The final site can be viewed HERE