Better Understanding of Using CSS for Page Layouts

After hours and hours of exhaustion and frustration, I've finally arrived at what I can accept as a decent implementation of a webpage with a gradient border.



The page header and page footer will stay in-position with the page, and the footer will always appear at the bottom of the screen no matter how it is resized or how much content is on the page.

The final implementation has code that looks like the following in the HTML:

<!-- Create the backdrop. -->

<div class="Backdrop">
 <div class="BackdropLeft">
 </div>
 <div class="BackdropRight">
 </div>
</div>

<!-- Create the page (containing content). -->

<div class="Page">
 <div class="PageHeader">
  PageHeader
 </div>
 <div class="PageBody">
  PageBody
 </div>
 <div class="PageFooter">
  PageFooter
 </div>
</div>

Then, CSS in the background was used to do the trick to position everything correctly.

body {
 background-color:#987431;
} /* body */
body>div {
 width:800px;
} /* body>div */
div.Backdrop {
 position:fixed;
 
 left:0;
 margin-left:auto;
 margin-right:auto;
 right:0;
 
 top:0;
 margin-top:0;
 height:100%;
 margin-bottom:0;
 
 background-color:white;
} /* div.Backdrop */
div.Backdrop>div {
 position:fixed;
 
 width:100%;
 
 height:100%;
} /* div.Backdrop>div */
div.BackdropLeft {
 background-position:0;
 background-image:url("gradient-rl-nu_black-nu_gold.jpg");
 background-repeat:repeat-y;
} /* div.BackdropLeft */
div.BackdropRight {
 background-position:760px;
 background-image:url("gradient-lr-nu_black-nu_gold.jpg");
 background-repeat:repeat-y;
} /* div.BackdropRight */
div.Page {
 position:absolute;
 
 left:0;
 margin-left:auto;
 margin-right:auto;
 right:0;
 
 top:0;
 margin-top:0;
 margin-bottom:0;
 
 min-height:100%;
} /* div.Page */
div.Page>div {
 left:0;
 margin-left:auto;
 width:720px;
 margin-right:auto;
 right:0;
} /* div.Page>div */
div.PageHeader {
 position:absolute;
 
 top:0;
 margin-top:0;
 height:100px;
 
 background-color:red;
} /* div.PageHeader */
div.PageBody {
 background-color:white;
 
 padding-top:100px;
 padding-bottom:100px;
} /* div.PageBody */
div.PageFooter {
 position:absolute;
 
 height:100px;
 margin-bottom:0;
 bottom:0px;
 
 background-color:blue;
} /* div.PageFooter */

I feel like I have a much better idea of how to layout webpages now. Just learning all of the available tools (properties) is a huge challenge, which included almost 100 pages of reading on the W3C website for the CSS 2.1 specification. Whew!