This is the maincontent

1. Create a "new" blank XHTML page and save it somewhere on your computer. (i.e., Desktop)
2. Add four <div> tags with ids for the header,sidebar, maincontent and footer:
   
   <div id="header">This is the header</div>
   <div id="sidebar">This is the sidebar</div>
   <div id="maincontent">This is the maincontent</div>
   <div id="footer">This is the footer</div>
   
   
3. Add a set of <style> tags and then add some rules to style them:
   
   <style>
   #header {width:950px; height:100px; background-color:#FFC}
   #sidebar{width:150px; height:500px; background-color:#CCC;}
   #maincontent{width:770px;height:500px; background-color:#CCF}
   #footer{width:950px; height:30px; background-color:#CCC}
   </style>
   
   NOTE: You will notice that the maincontent div is sitting below (instead of next to sidbar). This is because it is a block level element and it will appear in the same order it is in the code and will stack on top of one another.
   
   
4. Add rules to the #sidebar container to float it right and float the #maincontent container left:
   
   #sidebar{width:150px; height:500px; background-color:#CCC; float:right;}
   #maincontent{width:770px;height:500px; background-color:#CCF; float:left;}
   
   NOTE: While the #maincontent container did float, you may notice that the #footer container moved up as well. This is because the #sidebar and #maincontent containers are no longer considered in the natural order of the document flow, so the footer takes its rightful place below the header.
   
   
5. Add a clear property to #footer container to clear both columns (sidebar/maincontent):
   
   #footer{width:950px; height:30px; background-color:#CCC; clear:both;}
   
   NOTE: The #maincontent container may appear to "hang-out" pass the width of the header. That is because it was told to float left and it will float as much as it can. To resolve this problem, we will wrap all div tags to "contain" all of them.
   
   
6. Wrap the four divs with a #container div:
   
   <div container>
   <div id="header">This is the header</div>
   <div id="sidebar">This is the sidebar</div>
   <div id="maincontent">This is the maincontent</div>
   <div id="footer">This is the footer</div>
   </div>
   
   
7. Style the #container div with a new #container selector:
   
   #container{width:950px; height:635px;}
   
   
8. Preview the page in a browser (F12). You will notice that it seems to be "stuck" in the top/level corner of the browser. To resolve this problem, add a rule to "center" the #container div:
   
   #container{width:950px; height:635px; margin: 0 auto;}