Forum Moderators: not2easy
Here is the CSS:
body {
margin: 0;
padding: 0;
text-align: center;
width: 800px;
font: small/17px Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
text-align: left;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#bluebg {
position:absolute;
left:0px;
top:167px;
width:800px;
background: #336699;
margin: 0px;
}
#whitecontent {
background: #FFFFFF;
left:10px;
top: 0px;
width:740px;
margin: 0px 10px;
padding: 0px 20px 20px;
}
#header {
position:absolute;
left:0px;
top:0px;
width:798px;
height:136px;
z-index:1;
}
#tabmenu {
position:absolute;
left:238px;
top:145px;
width:560px;
height:24px;
z-index:2;
}
Here is the HTML:
<body topmargin="0">
<div id="wrapper">
<div id="header"><img src="images/main3.gif" width="800" height="169" /></div>
<div id="tabmenu">
<script src="images/ltbluetop.js"></script>
</div>
<div id="bluebg">
<div id="whitecontent">
</div>
<div><img src="images/bu004119a.gif" width="800" height="22" /></div>
</div>
</div>
</body>
Thanks for any help you can give.
I don't see the necessity of giving a width for body, so I'd remove that.
Your wrapper does not have what's called "containing block" status.
Generically speaking, to give make an element be containing box, you should set position:relative to the element. This will make it so that positioning like position:absolute are positioned relative to that element. With no containing block, absolute positioning defaults to the document root. More information can be found through the following link, which specifies containing block behaviour, as well as other W3C rendering standards:
[w3.org...]
