HTML DIV with absolute position: how to make it 100% wide and zoom-safe?

StackOverflow https://stackoverflow.com/questions/3425656

  •  26-09-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

Yes, add this to the #over-div styling:

min-width:500px;

That ensures that #over-div will be at least as wide as your #header and #content divs

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top