Three columns with navigation on the right

Three columns with navigation on the right : three Columns : Layout HTML CSS TUTORIALS


 



<!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></title>
<style type="text/css">
#frame {
 margin-left: 20px;
 width: 710px;
}

#columnMain {
 float: right;
 width: 380px;
}
#columnLeft {
 float: left;
 width: 150px;
}
#columnRight {
 float: right;
 width: 120px;
}
#enclose {
 float:left;
 width:560px;
}
#footer {
 clear: both;
 padding-top: 1em;
 text-align: center;
}
</style>
</head>

<body>
  <div id="frame">
    <div id="header">
      <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
    </div>

    <div id="enclose">
      <div id="columnMain">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
      </div>

      <div id="columnLeft">
<p>This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. 
This is a text. This is a text. This is a text. This is a text. 
</p>
      
      </div>
</div>
      <div id="columnRight">
    
        <h3>Navigation</h3>

        <ul>
          <li><a href="">Q</a></li>

          <li><a href="">N</a></li>

          <li><a href="">C</a></li>
          
          <li><a href="">D</a></li>

          <li><a href="">R</a></li>
        </ul>
      </div>

      <div id="footer">
        <p>Proin at eros non eros adipiscing mollis.</p>
      </div>
    </div>
</body>
</html>

HTML code for linking to this page:

Three columns with navigation on the right : three Columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » three Columns »

Three columns with navigation on the right

HTML CSS TUTORIALS