3 column layout with equalising columns and footer : footer : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » footer »

 

3 column layout with equalising columns and 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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#outer{
  height:100%;
  min-height:100%;
  margin-left:260px;
  margin-right:130px;
  background:#aaa;
  border-left:1px solid #000;
  border-right:1px solid #000;
  margin-bottom:-52px;
}
 
html>body #outer{
    height:auto;
}
#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:70px;
  background:#eee;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  overflow:hidden;
}
#left {
  position:relative;
  width:260px;
  float:left;
  margin-left:-259px;
  padding-top:72px;
}
#left p {padding-left:1px;padding-right:3px}
#right p {padding-left:3px;padding-right:2px}

#right {
  position:relative;
  width:130px;
  float:right;
  margin-right:-129px;
  padding-top:72px;
}
#leftfr {
  float:right;
  width:125px;
}
#leftfl {
  float:left;
  width:130px;
}
#footer {
  width:100%;
  clear:both;
  height:50px;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  background-color: #ddd;
  text-align:center;
  position:relative;
}
html #footer {
  height:52px;
}
#clearheader{
    height:72px;
}
#clearfooter{
    clear:both;
    height:40px;
}
div,p  {
    margin-top:0
}
html #centrecontent {
    height:1%;
    margin-bottom:12px
}
</style>
</head>
<body>
<div id="outer"
  <div id="left"
    <div id="leftfl"
      <p>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. </p>
    </div>

    <div id="leftfr"
      <p>Left Content goes here : </p>
    </div>
  </div>
  
  
  <div id="right"
    <p>Right content goes here : Right content goes here : Right content goes 
      here : Right content goes here : Right content goes here : Right content 
      goes here : Right content goes here : Right content goes here : Right content 
      goes here : </p>
  </div>
  <div id="clearheader"></div>

  <div id="centrecontent">
  <p>link</p>
  </div>
  <div id="clearfooter"></div>
</div>
<div id="footer">| <a href="">A</a> | <a href="">2</a> | <a href="">3</a> | <a href="">
E</a> | <a href="">Author</a> | </div>

<div id="header">Header</div>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» footer