Header, sub header, footer with one column : One Column « Layout

   





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Splash page layout</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style rel="stylesheet" type="text/css">

#wrapper {

  border: 1px solid #033;

  position: relative;

}





body#cols3 #navigation {

  position: absolute;

  top: 6.8em;

  left: 0;

}



body#cols3 #related {

  position: absolute;

  top: 6.8em;

  right: 10px;

}





#navigation ul,#related h2 {

  margin-top: 0;

  padding-top: 0;

}





#footer {

  padding: 5px 0 5px 160px;

  clear: both;

  background: #D9FFF8;

  font-size: 0.8em;

  color: #030;

}

</style>

</head>



<body id="splash">

<div id="wrapper">

 <div id="header"><h1>Header</h1></div>

 

 <div id="breadcrumb">Sub header</div>

 

 <div id="content-wrapper">

  <div id="content-inner">

  <h2>Header 2</h2>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  <p>this is a test. this is a test. </p>

  

  </div>

 </div>

 

 <div id="navigation"></div>

 

 <div id="related"></div>

 

 <div id="footer">Footer</div>

</div>

</body>

</html>
Header, sub header, footer with one column : One Column « Layout « HTML / CSS
