Three-Column Layout with absolute position : three Columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » three Columns »

Three-Column Layout with absolute position


 


<!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>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
  content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
#left {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 200px;
}
#center {
  margin-left: 220px;
  margin-right: 220px;
}
#right {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 200px;
}

</style>
</head>
<body>
  <div id="left">
    <p>
left
    </p>
  </div>
  <div id="center">
    <p>
center
    </p>
  </div>
  <div id="right">
    <p>
right
    </p>
  </div>
</body>
</html>