Basic 3-Column Sample Page : three Columns : Layout HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout » three Columns »

 

Basic 3-Column Sample Page


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml11/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">
.content>p {
  margin: 0;
}
.content>p+p {
  text-indent: 30px;
}
.content {
  position: relative; 
  width: auto;
  min-width: 120px;
  margin: 0 210px 20px 170px;
  border: 1px solid black;
  padding: 10px;
  z-index: 3;
}

#navleft {
  position: absolute;
  width: 128px;
  top: 20px;
  left: 20px;
  font-size: 0.9em;
  border: 1px dashed black;
  padding: 10px;
  z-index: 2;
}

#navright {
  position: absolute;
  width: 168px;
  top: 20px;
  right: 20px;
  border: 1px dashed black;
  padding: 10px;
  z-index: 1;
}

</style>
</head>
<body>

<div class="content"
  <h1>header</h1>
  <p>Web.</p>
  <p>What?</p>
</div>

<div class="content"
  <h2>CSS in Context</h2>
  <p>their systems.</p>
</div>

<div class="content">
  <h2>Content</h2>
  <p>page.</p>
</div>

<div id="navleft">
  <h2>Some Links</h2>
  <p>
    <a href="" title="">Home Page</a><br/>
    <a href="" title="">Home</a><br/>
    <a href="" title="">Book</a><br/>
    <a href="" title="">One</a><br/>
    <a href="" title="">Here</a><br/>
    <a href="" title="">Nowhere</a><br/>
    <a href="" title="">Four</a><br/>
    <a href="" title="">Link</a><br/>
  </p>
</div>

<div id="navright">
  <h2>CSS</h2>
  <p>CSS.</p>
  <p>subject,
     <a href="mailto:d@d.com">drop me an email</a></p>
</div>

</body>
</html

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout
» three Columns