Three column layout with header and footer
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Layout Example</title>
<style type='text/css'>
body {
margin:0px;
background-color:#000000;
font-family:arial, verdana, sans-serif;
text-align:center;}
#frame {
margin-left:auto;
margin-right:auto;
text-align:left;
width:960px;
background-image:url("images/960px_12_col_grid.gif");
background-repeat:repeat-y;}
#page {
margin:0px 10px 10px 10px;}
#header {
background-color:#cccccc;
padding:10px;
height:120px;}
#navigation {
background-color:#efefef;
padding:10px;
height:40px;}
#footer {
background-color:#cccccc;
padding:10px;
height:40px;
clear:both;
border-top:20px solid #ffffff;}
/* 3 columns */
.column1of3, .column2of3, .column3of3 {
float:left;
width:280px;
background-color:#cccccc;
padding:10px;
margin-top:20px;
height:173px;}
.column1of3, .column2of3, .columns1and2of3 {margin-right:20px;}
.columns1and2of3, .columns2and3of3 {
float:left;
width:600px;
background-color:#cccccc;
padding:10px;
margin-top:20px;}
</style>
</head>
<body>
<div id="frame">
<div id="page">
<div id="header">header</div>
<div id="navigation">navigation</div>
<div class="column1of3">column 1 of 3</div>
<div class="column2of3">column 2 of 3</div>
<div class="column3of3">column 3 of 3</div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
Related examples in the same category