Home/ Questions/Q 8222343
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T14:14:51+00:00

<!DOCTYPE html> <html><head><style> html, body{ width: 99%; /* to prevent scroll bar when unnessery

  • 0
<!DOCTYPE html>
<html><head><style>
html, body{
    width: 99%; /* to prevent scroll bar when unnessery */
    height: 100%;
}
div#main_container{
    position: absolute; 
    top: 50%; margin-top: -200px;
    left: 50%;  margin-left: -400px;
    width: 800px; height: 400px;    
    border: 1px solid black;
}
</style></head><body>
<div id='main_container'>
     Some content
</div>
</body></html>

PROBLEM: If I make window of the browser smaller then my content block, I can’t seen the top and left parts of the block – scrolling bars looks like I am on max of top\left of content, but no top and right of my block is seen.

Why does it happens and how to fix it?

I tested in 3 browsers, so it’s not browser issue.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It happens because it’s meant to happen. Let’s to the math for a browser with it’s height at 200px.

    So, what’s 50% of 200px? datarara.. it’s 100px. That puts the top of #main_container at 100px in the y-axis. Give it a margin of -200px, and it goes up 200px. If it’s at 100px and it moves up 200px, #main_container‘s top gets placed at -100px. No wonder why part of it is hidden.

    The Solution

    A solution would be to make the position: absolute on #main_container relative to the body element and not the browser window (that is: set position:relative on body). Then, by setting a min-height and min-width on body equal to #main_container‘s height and width (respectively), no matter how short the window would become, the body’s dimensions would never be smaller than #main_container – no possible “overflow”.

    Applying those styles to the body element, however, assumes you’ll only have on of those absolutely positioned boxes on your page. If this is not the case, then wrapping #main_container with it’s own div would probably be the most compatible solution. Here’s that solution:

    The HTML 

    <div class="wrap">
    <div class="box"></div>
</div>

    The CSS

    .wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: 800px; min-height: 400px;
}

.box{
    position: absolute;
    top: 50%; margin-top: -200px;
    left: 50%;  margin-left: -400px;
    width: 800px; height: 400px;    
    border: 1px solid black;
}
    • 0