top 100% vs bottom 0 *

dabblet.css

/** top 100% vs bottom 0 **/

div {
	position: relative;
	display: inline-block;
	height: 200px;
	width: 200px;
	background: rgba(0,0,0,.5);
	margin: 5px 0;
}

#top div, #bottom div {
	position: absolute;
	height: 50px;
	width: 90px;
	background: #f00;
}
#top div {
	top: 100%;
}
#bottom div {
	bottom: 0;
}

dabblet.html

<div style="background-color:#000;">
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" table layout;fixed;>
    <tr>
      <td valign="top" align="center" background="images/Sportsmanhub_Background.png" background-repeat:no-repeat; background-attachment:fixed; background-position:center; >
      <table width = "100%" border= "0" cellspaceing = "0" cellpadding = "0" bgcolor: "#000"; table layout:fixed;>
    <tr>
      <td>
        <table class="container" width="640" align="center" border= "0" cellspaceing="0" cellpadding="0" table layout: fixed;>
          <tr>
            <!--leave the date out seperate of the image, above the whole tabel-->
            <td valign = "top"  align= "center" class= "logo"  bgcolor ="#000" style= "padding: 10px 20px 0px 30px; border-left:1px solid #000; border-right:1px solid #000; border-top:1px solid #000;">
              <a href = "sportsmanshub.com"><img src= "images/top_logo.png" alt= "SportsMans Hub" width="685" height="185" border= "0"></a>
            </td>
          </tr>
          <tr>
            <td>
              <img src= "images/hot_news.png">
            </td>
          <tr>
            <td class="content" valign="top" bgcolor="#000" valign="top"  column-rule-width=60px style="padding: 5px 5px 5px 5px; border: 1px solid; border-color: #000; color:white; column-width=60px;">
              <p>Nulla accumsan dolor neque, sit amet fermentum metus adipiscing eu. Praesent sed vestibulum velit. Sed bibendum euismod leo vitae egestas? Mauris laoreet, eros sit amet laoreet luctus, leo turpis commodo erat, sed faucibus sem libero non dolor. <br><a href = "sportsmanshub.com"><img src="images/read_more.png" align = "right"></a></br></p>
            </td>
            <td colspan=2>
            </td>
          </tr>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
          <tr>
            <td>
            </td>
          </tr>
        </table>
  </table>
  </td>
  </tr>
  </td>
  </tr>
  </table>
</div>

dabblet.js

<div style="background-color:#000;">

 		 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" table layout;fixed;>
  				  <tr>
   					   <td valign="top" align="center" background="images/Sportsmanhub_Background.png" background-repeat:no-repeat; background-attachment:fixed; background-position:center; >




			<table width = "100%" border= "0" cellspaceing = "0" cellpadding = "0" bgcolor: "#000"; table layout:fixed;>
			<tr>
				<td>

				<table class="container" width="640" align="center" border= "0" cellspaceing="0" cellpadding="0" table layout: fixed;>
					<tr>

						<!--leave the date out seperate of the image, above the whole tabel-->
						<td valign = "top"  align= "center" class= "logo"  bgcolor ="#000" style= "padding: 10px 20px 0px 30px; border-left:1px solid #000; border-right:1px solid #000; border-top:1px solid #000;">
							<a href = "sportsmanshub.com"><img src= "images/top_logo.png" alt= "SportsMans Hub" width="685" height="185" border= "0"></a>
						</td>
					</tr>
					<tr>
						<td>
							<img src= "images/hot_news.png">
						</td>
					<tr>
						<td class="content" valign="top" bgcolor="#000" valign="top"  column-rule-width=60px style="padding: 5px 5px 5px 5px; border: 1px solid; border-color: #000; color:white; column-width=60px;">
							<p>Nulla accumsan dolor neque, sit amet fermentum metus adipiscing eu. Praesent sed vestibulum velit. Sed bibendum euismod leo vitae egestas? Mauris laoreet, eros sit amet laoreet luctus, leo turpis commodo erat, sed faucibus sem libero non dolor. <br><a href = "sportsmanshub.com"><img src="images/read_more.png" align = "right"></a></br></p>
						</td>
						<td colspan=2>
							
						</td>
					</tr>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
					<tr>
						<td>
						</td>
					</tr>
				</table>
			</table>

				</td>
			</tr>


				</td>
    	</tr>
  </table>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}