Two Column Left Layout

Author: MikeW    Date: 2016-08-15 22:43   

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.