Two columns with a footer

Two columns with a footer : Two 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">
#columnLeft {
 float: left;
 width: 67%;
 background: #fff;
 border-right: 1px solid black;
}

#columnRight {
 padding-left: 2em;
 margin-top: 0;
 padding-top: 0;
}
#footer {
 clear: both;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 text-align: center;
}
</style>
</head>


<body>
<div id="columnLeft">
<h1>Header Header Header Header Header </h1>
<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>

<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="columnRight">
<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>
  <h3>Navigation</h3>
  <p>
  <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>
  </p>
</div>

<div id="footer">
  <p>Here is the footer. </p>
</div>
  
</body>

</html>

HTML code for linking to this page:

Two columns with a footer : Two columns : Layout HTML CSS TUTORIALS

HTML CSS TUTORIALS » Layout » Two columns »

Two columns with a footer

HTML CSS TUTORIALS