I have a following HTML/CSS (simplified):
<body>
<style>
body
{
margin: 0px;
padding: 0px;
color: #fff;
background-color: #090909;
text-align: center;
}
#content
{
width: 500px;
margin: 0px auto;
background-color: blue;
}
#header
{
width: 500px;
margin: 0px auto;
background-color: green;
}
#over-div {
background-color: red;
position: absolute;
height: 20px;
width: 100%;
margin: 0px;
top: 0px;
left: 0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
</style>
<div id="over-div">aa</div>
<div id="header">
header
</div>
<div id="content">
content here
</div>
</body>
The idea is to have over-div to cover the upper part of the page completely (but do not keep it fixed there, so it is not visible when user scrolls down the page).
If you zoom-in extremely (Ctrl+ wheel) till the horizontal scrollbar appears, you can see that after scrolling completely to the right, the over-div does not cover the header completely to the right side of window.
I hoped that width:100% would mean “always use 100% width of the body”, but it seems it is not true for absolute positioned divs.
Tested browsers: Firefox 3.5, Chrome, IE8 (with and without compatibility mode).
Is there any way to get that div cover 100% width of page?
Yes, add this to the #over-div styling:
That ensures that #over-div will be at least as wide as your #header and #content divs