This is a simple 2 column layout suitable for smaller sites. It includes a header, left column, content area and a footer.
These elements are centered in the browser window giving the page an overall width of 760 pixels, so it caters for those browsing at 800 x 600 resolution.
The centering is achieved by wrapping the left column and content in a centering div (see Centering a Layout Horizontally).
The code below will reproduce the screenshot above. (you may need to replace the quotation marks with straight quotes for it to display properly).
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Two Column Fixed Width and Centered Layout</title>
<style type=”text/css”>
<!–
/* Styles for centering layout in browser */
body {
text-align:center;
min-width: 760px;
}
#centeringwrapper {
width: 760px;
text-align:left;
margin: 0 auto;
}
/******************************************/
/* full width header and footer elements */
#header, #footer {
background-color:#CCC;
text-align:center;
clear: both;
width: 100%;
}
#header {
height: 100px;
}
/******************************************/
/* floating content areas */
#content {
float:right;
width: 560px;
}
#leftcolumn {
float:right;
width: 200px;
background-color:#CCFFFF;
}
/******************************************/
–>
</style>
</head>
<body>
<div id=”centeringwrapper”>
<div id=”header”>
<h1>Two Column, Fixed width, Centered Layout</h1>
<p>(catchy title, huh?)</p>
</div>
<div id=”content”>
<h2>heading</h2>
<p>Mauris fermentum, risus eu hendrerit convallis, urna metus porttitor lacus, in pretium purus nisi id magna. Nunc tristique vehicula sem. Nam non nunc. Duis orci justo, imperdiet a, pharetra sed, rutrum quis, diam. Sed nec enim a sapien sollicitudin laoreet.</p>
<p>Sed eu pede eget diam fermentum scelerisque. In ut arcu. Vivamus lacinia, libero non molestie varius, nunc quam mollis ligula, ut malesuada nibh nisl vitae tortor. Cras blandit, felis sit amet viverra consequat, enim tellus rutrum mauris, a tempus enim turpis quis erat. </p>
<p>Sed dictum sollicitudin augue. In eros tellus, luctus ac, vulputate sed, consectetuer ac, pede. Ut porttitor mauris vitae nisi. Etiam lectus metus, porttitor sed, viverra vitae, ornare in, ipsum. Donec in eros a arcu auctor ultrices.</p>
<h2>Heading</h2>
<p> Duis tempus condimentum metus. Etiam feugiat, justo eu cursus pretium, magna odio malesuada turpis, at euismod nibh risus at metus. Fusce eleifend massa nec pede. Donec tristique nisi fermentum felis. Nunc et sapien nec dui malesuada malesuada. </p>
<p>Integer sem tortor, mollis sed, gravida eget, molestie eu, lorem. Nullam in nisl at lorem facilisis fermentum. Ut eros. Praesent suscipit pulvinar eros. Nulla purus. Aliquam ac nisl quis erat tincidunt vestibulum. Mauris scelerisque malesuada tellus. Nam ultrices purus sit amet tellus. Morbi dignissim elit laoreet orci. In sit amet tellus. Donec malesuada tempor turpis.</p>
<p>Integer in lorem. Mauris nec urna eget justo eleifend fringilla. Quisque lobortis ultrices enim. Phasellus id nisi eu mi cursus mattis. Nunc facilisis, mauris et pellentesque sagittis, diam augue faucibus nisl, in tincidunt lorem magna non lorem. Fusce vitae elit in nisl tincidunt blandit. Proin auctor nibh non neque. Nulla nisi. </p>
</div>
<div id=”leftcolumn”>
<p>Left Column</p>
<ul>
<li>Nav link 1 </li>
<li>Nav link 2 </li>
<li>Nav link 3 </li>
<li>Nav link 4 </li>
<li>Nav link 5 </li>
</ul>
</div>
<div id=”footer”>
<p>Footer information</p>
</div>
</div>
</body>
</html>
