I currently have a page layout with 7 different div elements structured like this;
<div id="container">
<div id="head"></div>
<div id="A">
<div id="A1">A1</div>
<div id="A2"></div>
</div>
<div id="B"></div>
<div id="foot"></div>
</div>
The CSS styling applied to these elements is as follows;
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B, #foot {
position: absolute;
}
#head{
background: #FF9900;
width: 100%;
height: 35px;
}
#A {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
}
#A1{
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#B {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #99CC00;
}
#foot{
background: #0066CC;
width: 100%;
height: 35px;
bottom: 0;
}
However, the div element A1 is currently not being displayed as intended. You can view a live example of this issue in action on this demo. My goal is to have div A1 appear above div B. Any suggestions on how to resolve this issue would be greatly appreciated.
Thank you in advance for your help. :)
Sincerely, blasteralfred