Two columns with a footer : Two columns « Layout « HTML / CSS
- HTML / CSS
- Layout
- Two columns
Two columns with a footer
<!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>
Related examples in the same category