website layout with table-cell

by Black Diamond

HTML

<div id="header">
    HEADER HERE
    <div id="bannerleft">
      BANNER LEFT
    </div>

    <div id="bannerright">
      BANNER RIGHT
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container">
    <div id="Sidebar">
      SIDEBAR HERE
      <div id="SidebarBottom">
        Sidebar Bottom
      </div>
    </div>
    <div id="Main">
      MAIN HERE
      <!-- content -->
      <div id="NavigationContainer">
        <ul id="Navigation">
          <li><a href="#">Nav</a></li>
          <li><a href="#">Nav</a></li>
          <li><a href="#">Nav</a></li>
          <li><a href="#">Nav</a></li>
          <li><a href="#">Nav</a></li>
          <li><a href="#">Nav</a></li>
        </ul>
      </div>
    </div>
  </div>

CSS

body 
{
    font-family:Calibri, Sans-Serif;
    height:100%;
}
.container
{
  display: table;
  height: 260px;

}
#Main
{
  display: table-cell;
  vertical-align: top;
  background-color:blue;
  width: 100%;
}
#header
{
    width:100%;
    z-index:1;
    height:80px;
    /*background-image:url("../../Content/images/bannercenter.gif");*/
  background-color: wheat;
    background-repeat:repeat-x;
}
#header
#bannerleft
{
    float:left;
    /*background-image:url("../../Content/images/bannerleft.gif");*/
  background-color: yellow;
    background-repeat:no-repeat;
    height: 100%;
    width:100px;
    z-index:2;
}
#bannerright
{
    float:right;
    /*background-image:url("../../Content/images/bannerright.gif");*/
    background-repeat:no-repeat;
    width:80px;
    height: 100%;
    background-color:pink;
}
#Sidebar
{
    min-width:80px;
    background:url("../../Content/images/Sidebar.png") repeat-y;
  display: table-cell;
  vertical-align: top;
  background-color:red;
  position:relative;
}
#SidebarBottom
{
	width:30px
    height:30px;
    /*background: url("../../Content/images/SidebarImage.png") no-repeat bottom;*/
  	background-color:brown;
  position:absolute;
  bottom:0;
  
}
#NavigationContainer
{

background-color:#bbc4c3;
height:29px;

}
#Navigation
{
margin-left:190px;
font-family:Calibri, Sans-Serif;
}
#Navigation li
{
float:left;
list-style:none;
padding-right:3%;
padding-top:6px;
font-size:100%;
}
#Navigation a:link, a:active, a:visited
{
color:#012235;
text-decoration:none;
font-weight:500;
}
#Navigation a:hover
{
    color:White;
}
#WebLinks
{
float:right;
color:#00324b;
margin-top:50px;
width: 75px;
}
#WebLinks span
{
float:left;
margin-right:7px;
margin-left:21px;
font-size:10pt;
margin-top:8px;
font-family:Helvetica;
}
#WebLinks ul li
{
float:left;
padding-right:7px;
list-style:none;
}
#WebLinks ul li a
{
text-decoration:none;
font-size:8pt;
color:#00324b;
font-weight:normal;
}
#WebLinks ul li a img
{
    border-style:none;
}
#WebLinks ul li...