Home/ Questions/Q 9164931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T14:47:57+00:00

I want to have a yellow rectangle #box-over across the entire screen at width

  • 0

I want to have a yellow rectangle #box-over across the entire screen at width 100%.
At default zoom level on Google Chrome (I’ve not tried all browsers) it works fine unless I zoom in beyond 300% or so then that yellow box no longer is 100% of the screen it gets clipped and a horizontal scroll bar appears at the bottom.
I can’t seem to figure out how to fix this behavior.

JSFIDDLE
http://jsfiddle.net/VySGL/1/

SCREENSHOT
enter image description here

SOURCE

        <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #box {
            width: 100%;
            position: relative;
        }

        #box #box-over {
            z-index: 1;
            width: 100%;
            height: 50px;
            background-color: yellow;
            position: absolute;
            top:10px;
            opacity:0.8;

        }           

        #box #box-over .box-column {
            width: 900px;
            margin: 0 auto;
            zoom: 1;
            position: relative;
            height: 50px;
        }
        </style>

    </head>
    <body>

        <div id="box">
            <div id="box-over">
                <div class="box-column">
                </div>
            </div>
        </div>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    An alternative for using 100% width is to set left and right to 0 in CSS like this…

    See JSFiddle

    #box #box-over {
    z-index: 1;
    left: 0;
    right: 0;
    height: 50px;
    background-color: yellow;
    position: absolute;
    top:10px;
    opacity:0.8;

}           

#box #box-over .box-column {
    left: 0;
    right: 0;
    margin: 0 auto;
    zoom: 1;
    position: absolute;
    height: 50px;
}

    Using the left and right properties ensure you never exceed 100% width even when you add padding (See this JSFiddle).

    For example when you add padding to your div it will be 100% plus the padding. See JSFiddle

    • 0