three column layout with header and footer : three Columns : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » three Columns »

 

three column layout with header and footer


 

<html>
<head>
<style>
div#masthead, div#main {
width: 800px;
}
div#masthead img {
vertical-align: bottom;
}
div#nav {
float: left;
width: 140px;
}
div#expertlist {
float: right;
width: 160px;
}
div#expertlist {
border: 1px solid #467CC2;
border-bottom-width: 10px;
margin: 40px 40px 0 0;
}
div#content {
margin: 0 200px 0 145px;
}
div#credits {
width: 788px;
}

</style>
</head>
<body>
<div id="masthead">header header header header header </div>
<div id="main">
<div id="nav">navigation. navigation. navigation. navigation. </div>
<div id="expertlist">expertlist</div>
<div id="content">
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 

this is a test. this is a test. this is a test. 
<div id="bottomlinks">this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 
</div>
</div>

<div id="credits">this is a test. this is a test. this is a test. </div>
</div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» three Columns