After working on it, here's the solution I came up with: http://example.com/WGaVH/21/
I made some adjustments to the HTML code to simplify it. There are a few overlapping div elements that might pose challenges depending on your background requirements (but these could be addressed by adding another nested div).
Updated HTML Structure
<div id="wrapper">
<div class="top left"><p><span id="topLeftContent">1</span></p></div>
<div class="top mid"><p><span id="topCenterContent">2</span></p></div>
<div class="top right"><p><span id="topRightContent">3</span></p></div>
<div class="main left"><p><span id="mainLeftContent">4</span></p></div>
<div class="main mid"><p><span id="mainCenterContent">
<object width="84" height="60" align="middle"></object>5
</span></p></div>
<div class="main right"><p><span id="mainRightContent">6</span></p></div>
<div class="bottom left"><p><span id="bottomLeftContent">7</span></p></div>
<div class="bottom mid"><p><span id="bottomCenterContent">8</span></p></div>
<div class="bottom right"><p><span id="bottomRightContent">9</span></p></div>
</div>
CSS Stylesheet Updates (color codes used for demonstration purposes)
html, body{width:100%;height:100%;}
html,body {margin:0;padding:0}
#wrapper{width:100%;height:100%;background:#bbffbb;overflow:hidden;}
.top, .main, .bottom {
text-align:center;
float: left;
position: relative;
background-color: #FFFFCC;
}
.top {
height: 50%;
margin-bottom: -30px;
}
.top p {
margin-bottom: 30px;
}
.main {
height: 60px;
z-index: 2;
}
.bottom {
height: 50%;
margin-top: -30px;
}
.bottom p {
margin-top: 30px;
}
.left {
width: 50%;
margin-right: -42px;
}
.left p {
margin-right: 42px;
}
.mid {
width: 84px;
z-index: 2;
}
.right {
width: 50%;
margin-left: -42px;
}
.right p {
margin-left: 42px;
}
.main.mid {
z-index: 3;
background-color: #CCFFFF;
}
.mid {
background-color: #FFFFFF;
}
.main {
background-color: #FFCCFF;
}