1 column, header, content, footer : One Column : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » One Column »

1 column, header, content, footer


 

<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
  min-height: 100%;
  width: 612px;
  background: #eee;
  position: relative;
}
* html #outer {
  height: 100%
}

#header {
  border: 1px solid #000;
  background: #ccc;
  height: 40px;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #bbb;
  height: 40px;
  border-top: 1px solid #000;
  width: 98%;
}

#clearfooter {
  clear: both;
  height: 40px;
}
</style>
</head>
<body>
<div id="outer">
  <div id="header">Header</div>
  <p>Content</p>

  <p>Content</p>
  <div id="clearfooter"></div>
  <div id="footer">Footer</div>
</div>
</body>
</html>