Adding Headers and Footers with DIV-Based CSS Tables
Welcome to the concluding article of a four-part series on creating DIV-based CSS tables. In previous parts, you learned how to construct some basic web page layouts made up of two and three columns with the help of CSS tables. In this article, you will learn how to add header and footer sections to these layouts.
Adding Headers and Footers with DIV-Based CSS Tables - Adding header and footer sections to a two-column web page layout: a traditional CSS approach (Page 2 of 4 )
To be frank, adding a header and a footer section to an existing two-column web page layout is a pretty simple process that can be tackled with minor hassles. Essentially, the procedure requires only coding a couple of additional divs on the top and the bottom of the web document, and that’s all.
Undoubtedly, you'll understand this process better if you examine the following CSS code:
#tablewrapper{
border-collapse: collapse;
display: table;
table-layout: fixed;
}
#maincol, #sidebar{
display: table-cell;
}
#header{
padding: 10px;
background: #ffc;
}
#maincol{
width: 70%;
padding: 10px;
}
#sidebar{
width: 30%;
padding: 10px;
background: #eee;
}
#footer{
padding: 10px;
background: #ffc;
}
As you can see, all I did was add a pair of extra divs, identified as “header” and “footer” respectively, to the existing columns of the web document, where they will be rendered as cells of a typical HTML table. Not too difficult to grasp, right?
Now that you hopefully grasped how to incorporate header and footer sections into a previous web page layout composed of two main columns, it’s time to see how the CSS styles coded previously can be linked to the structural markup of the web page.
This interesting process will be shown in detail in the section to come, so if you want to learn more about it, please click on the link that appears below and keep reading.
Style Sheets 
Creating Web Page Layouts with Negative Margins
