This is a simple two column layout with a navigation bar on the left side of the screen. Feel free to use this as a starting point to build simple web site.
TwoColumnLeftLayout.html (Source)
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>Two Column Left Sidebar Layout</title>
6 <style type="text/css">
7 html { width:960px; }
8 h1 { margin:0px; }
9 wrap { padding:4px; }
10 nav { width:288px; float:left; background:gray; }
11 #header { text-align:center; background:lightblue; margin:0px; }
12 #main { background:lightgray; margin:0px 0px 0px 288px; padding:4px; }
13 #footer { clear:both; background:cyan; text-align:center; }
14 </style>
15 </head>
16 <body>
17 <div id="wrap">
18 <div id="header">
19 <h1>Page Title</h1>
20 </div>
21 <nav>
22 <ul>
23 <li>Nav item 1</li>
24 <li>Nav item 2</li>
25 <li>Nav item 3</li>
26 </ul>
27 </nav>
28 <div id="main">
29 <h2>Main Content Header</h2>
30 <p>Main content goes here.</p>
31 <p>More content here.</p>
32 <p>And evern more.</p>
33 </div>
34 <div id="footer">
35 <p>Footer goes here.</p>
36 </div>
37 </div>
38 </body>
39 </html>
The float
and margin
settings are the key things that make this work.