<?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;}
#frame {
margin-left:auto;
margin-right:auto;
width:960px;
background-color:#ffffff;
background-image:url("images/960px_3column_background.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;}
.column1of3, .column2of3, .column3of3 {
float:left;
width:280px;
background-color:#cccccc;
padding:10px;
margin-top:20px;}
.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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
<div class="column2of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus ullamcorper eget dignissim erat viverra. </div>
<div class="column3of3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel sem odio, et tincidunt magna. Nam malesuada justo non risus ullamcorper eget dignissim erat viverra. Mauris viverra massa ac libero feugiat tempor. Cras scelerisque fermentum dui et feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
|