css - ページの中央に固定されていないフッター、前の div を中断

Question

ホームページ制作初心者なのでお手柔らかにお願いします。私はかなり単純化したページをデザインしようとしています。このページでは、すべての要素が前の要素に従います。つまり、フロート、絶対配置、スティッキー フッターはありません。基本的に、フッターが別の要素の真ん中に表示されているときに、(画面の下部ではなく) ページの最後にフッターを表示したいだけです。そして、広範囲に検索して読んでも、何が間違っているのかわかりません...

これが私のCSSです：

header, footer, nav, div.main {  
    display: block;
  }

header {
  width: 940px;
  height: 150px;
  margin: 0 auto;
  margin-top: -56px;
  border: 0;
  padding: 0;
  }

nav {
  margin: 0 auto;
  width:940px;
  height:40px;
  background:#0F6B8F;
  overflow:hidden;
  }

nav ul {
  clear:left;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  text-align:center;
  }

nav ul li {
  display:block;
  float:left;
  list-style:none;
  margin:0;
  margin-top: -5px;
  padding:0;
  position:relative;
  color:#C2D6DD;
  font-family: sans-serif;
  font-size: 1.8em;
  }

nav ul li a {
  display:block;
  margin:0 0 0 1px;
  padding-left: 10px;
  padding-right: 10px;
  background:#0F6B8F;
  color:#C2D6DD;
  text-decoration:none;
  line-height:1.8em;
  }

nav ul li a:hover {
  background:#0F6B8F;
  color:#ED7312;
  }

a.navlink {
  color: #C2D6DD;
  }

a:link.navlink {
  color: #C2D6DD;
  }

a:visited.navlink {
  color: #C2D6DD;
  }

a:hover.navlink {
  color: #ED7312;
  }

div.main {
  min-height: 500px;
  width: 940px;
  margin: 0 auto;
  border: 0;
  padding: 0;
  }

div.wrapper {
  width: 920px;
  margin: 0 auto;
  border: 0;
  padding: 0 0 0 20px;
  }

.splitleft {
  float: left;
  width: 460px;
  margin: 0 auto;
  border: 0;
  }

.splitright {
  float: right;
  width: 460px;
  margin: 0 auto;
  border: 0;
  }

footer {
   margin: 0 auto;
   width: 940px;
   height: 60px;
   border-top-style: solid;
   border-top-width: 1px;
   border-top-color: #0F6B8F;
   position: relative;
   padding: 20px 0 0 0;
   display: block;
}


/* TABLE STYLING SECTION */

table {
  padding: 0 0 10px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 0.8em;
  border-spacing: 15px;
  }

table.border {
  padding: 0 0 10px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 0.8em;
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 2px solid #000000;
  }

tr.fifth:nth-of-type(5n+1) {
  border-bottom: 1px solid #000000;
  }

.colwide {
  width: 180px;
  }

.colmed {
  width: 120px;
  }

.colthin {
  width: 60px;
  }

.left {
  text-align: left;
  }

.center {
  text-align: center;
  }

.right {
  text-align: right;
  }

th.border {
  border-bottom: 2px solid #000000;
  font-weight: bold;
  padding: 5px 5px 5px 5px;
  }

td.LftLightRtLight {
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  padding: 5px 5px 5px 5px;
  }

td.LftHeavyRtLight {
  border-left: 2px solid #000000;
  border-right: 1px solid #000000;
  padding: 5px 5px 5px 5px;
  }

td.LftLightRtHeavy {
  border-left: 1px solid #000000;
  border-right: 2px solid #000000;
  padding: 5px 5px 5px 5px;
  }  


/* TEXT STYLING SECTION */

h3 { 
  color: #ED7312;
  font-size: 2.5em;
  font-family: sans-serif;
  margin: 0 auto;
  border: 0;
  padding: 0 0 10px 0;
  }

h4 {
  color: #0F6B8F;
  font-size: 1.8em;
  font-family: sans-serif;
  margin: 0 auto;
  border: 0;
  padding: 0 0 10px 0;
  }

h5 {
  color: #ED7312;
  font-size: 1.4em;
  font-family: sans-serif;
  margin: 0 auto;
  border: 0;
  padding: 0 0 10px 0;
  }

p#Title {
  color: #ED7312;
  font-family: sans-serif;
  font-size: 3.5em;
  text-align: right;
  margin-bottom: -0.5em;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 40px;
  }

p#Byline {
  color: #4EC8F8;
  font-family: sans-serif;
  font-style: italic;
  font-size: 1.8em;
  margin: 0;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 40px;
  }

p#Welcome {
  font-family: sans-serif;
  font-size: 0.8em;
  font-weight: bold;
  margin: 0;
  border: 0;
  padding: 25px 0 10px 0;
  }

p#AddSection {
  font-family: sans-serif;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  border: 0;
  padding: 0 0 20px 60px;
  }

p#Footer {
  font-family: sans-serif;
  font-size: 0.75em;
  margin: 0;
  border: 0;
  padding-top: 5px;
  padding-bottom: 20px;
  }

a:link {
  color: #000000;
  }

a:visited {
  color: #000000;
  }

a:hover {
  color: #ED7312;
  }

.center {
  text-align: center;
  }

.left {
  text-align: left;
  }

そして、これが私のHTMLです（私はHTML 5のみを使用しようとしています）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MyWebsite: Overview</title>
    <meta name="description" content="MyWebsite: Overview">
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <header>
      <p id='Title'>MyWebsite</p>
      <p id='Byline'>Where you can dump all your crap!</h2>
    </header>
    <nav>
      <ul>  
        <li><a class='navlink' href="/myhome.html">MyHome</a></li>  
        <li><a class='navlink' href="/myinfo.html">MyInfo</a></li>  
        <li><a class='navlink' href="/support.html">Support</a></li>  
        <li><a class='navlink' href="/shop.html">Shop</a></li>  
      </ul>  
    </nav>
    <div class="main">     
      <p id='Welcome'>Welcome <a href="/myhome.html">User Name</a>! You have access to the following:</p>
      <h3>Subject</h3>
      <div class="wrapper">
        <h4>Year</h4>
        <table>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
          </tr>
          <tr>
            <td class='center'>04/14/2014</td>
            <td class='center'>C</td>
            <td class='center'>6</td>
            <td class='center'>Full</td>
            <td class='center'>In progress</td>
            <td class='center'><a href=#>Grid</a></td>
            <td class='center'><a href=#>New</a></td> 
            <td class='center'><a href=#>Edit</a></td> 
            <td class='center' class='heavy'><a href=#>Submit</a></td> 
          </tr>
        </table>        
        <h5>Overall Performance</h5>
        <table class='border'>
          <tr class='fifth'>
            <th class='border colwide'>Person</th>
            <th class='border colthin'>Thing 1</th>
            <th class='border colthin'>Thing 2</th>
            <th class='border colthin'>Thing 3</th>
            <th class='border colthin'>Thing 4</th>
            <th class='border colthin'>Thing 5</th>
            <th class='border colthin'>Thing 6</th>
            <th class='border colthin'>Thing 7</th>
            <th class='border colthin'>Thing 8</th>
            <th class='border colthin'>Thing 9</th>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr>
           <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>JF</td>
            <td class='LftHeavyRtLight colthin center'>38</td>
            <td class='LftLightRtHeavy colthin center'>46.63</td>
            <td class='LftHeavyRtLight colthin center'>6</td>
            <td class='LftLightRtLight colthin center'>6</td>
            <td class='LftLightRtHeavy colthin center'>5</td>
            <td class='LftHeavyRtLight colthin center'>17</td>
            <td class='LftLightRtHeavy colthin center'>51.95</td>
            <td class='LftHeavyRtLight colthin center'>98.58</td>
            <td class='LftLightRtHeavy colthin center'>4</td>
          </tr>
        </table>
      </div>
      <div class="wrapper">
        <div class="splitleft">
          <h5>Performance</h5>
          <table class='border'>
          <tr class='fifth'>
            <th class='border colwide'>Attribute 1</th>
            <th class='border colthin'># poss</th>
            <th class='border colthin'>percent</th>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr> 
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
          <tr class='fifth'>
            <td class='LftHeavyRtLight colwide left'>a/r</td>
            <td class='LftLightRtLight colthin center'>3</td>
            <td class='LftLightRtHeavy colthin center'>63%</td>
          </tr>
        </div>
      </div>
    </div>   
    <footer>
      <p id='Footer'>&#169; 2013 MyWebsite</p>
      <p id='Footer'>*  Howdy is a registered trademark of Howdy Doody, which was not involved in the production of, and does not endorse this product.</p>
    </footer>
  </body>  
</html>

問題を示すこのjsfiddleを作成しました：

http://jsfiddle.net/QX8zU/

どんな助けでも大歓迎です！解決策は、私が見落としていた信じられないほどばかげたものだと確信しています...

前もって感謝します！

PS私のコードの他の厄介な側面を見つけたら、私はあなたの考えを聞くことに非常にオープンです!