This question addresses the problem that was found in one of the proposed solutions in response to another question: Rubber imposition: the empty space on the right .

The task is rather mediocre: to make a rubber layout with the width of the target content, say, 1024px. It should be centered when expanding the window.

In the previous question, a code was proposed that allows you to stretch the header , main and footer across the width of the screen. I added centering blocks to this code, in which, in fact, the target content will be located ( link to the code ). This is how it will look like (I drew a center translucent):

enter image description here

And everything would be great, but there is one defect. If you narrow the window to a size less than 1024px, and then scroll the scrollbar, then it turns out that the right border header, main and footer will be under centering. You can see this effect in the code I give .

The question is obvious: how to remove this defect?

    2 answers 2

    So that there are no defects (scrollbars) up to a width of 1024px, you need to set the behavior of elements up to 1024px in an adaptive or rubber layout. See the difference between adaptability and rubber here . Next, look for information on how to typeset the selected method.

    A small example https://jsfiddle.net/9w26zm5e/1/

     body { background: orange; } header, footer { background: lightblue; width: 100%; } .centering { background: rgba(255, 0, 0, 0.5); width: 300px; margin: 0 auto; } main { background: lightgreen; width: 100%; margin: 0 auto; } @media screen and (max-width: 300px) { .centering { width: 100px; } } 
     <body> <header> <div class="centering"> Header </div> </header> <main> <div class="centering"> Main </div> </main> <footer> <div class="centering"> Main </div> </footer> </body>

    • Notice that with lengths slightly exceeding 300px in your solution, the centrifiers are longer than header, footer, etc. Although there is no vertical scrollbar in the JSFiddle mini browser window, developing a real site, I found that if you turn off the vertical scrollbar, then this effect will not (but then it will not be possible to scroll). Why then does this effect take place in your example? - Bokov Hleb
    • Centrers are longer because of the default body styles, the margin which is not equal to 0, the margin from the body added to the width of the entire content and therefore it becomes a little wider. This can be solved by zeroing the margin the body example or by setting a smaller width for the centering, compared to @media screen and (max-width: 300px) example - stackanon
    • Thank you for your reply. In order to completely exhaust this topic, it remains only to learn how to avoid the same effect in the presence of a vertical scroll bar. - Side Gleb
    • I did not understand what is wrong with the vertical scrollbar, it appears when the height of the page content is greater than the height of the screen. It may be worth looking for information on how the vertical scrollbar affects the page. - stackanon

    In principle, this solution is almost perfect. I set the browser to an absolute width (let's call it the control width) of the body absolute width (in reality it could be, for example, the iPhone 320px screen width), and then everything stretches perfectly to infinity. If you narrow the window to less than the control width, then there will be nothing abnormal when scrolling.

    The only drawback is the one I mentioned in the commentary: if the control width is not overshoot, the header , main and footer turn out to be smaller than their centroschik, but with further expansion this quickly passes. But if this effect is removed, then the problem can be considered completely solved.

     <body> <header> <div class="centering"> Header </div> </header> <main> <div class="centering"> Main </div> </main> <footer> <div class="centering"> Main </div> </footer> </body> body { background: orange; } @media screen and (max-width: 300px) { body{ width:300px; background: blue; } } header, footer { background: lightblue; width: 100%; } .centering{ background: rgba(255,0,0,0.5); width: 300px; margin: 0 auto; } main { background: lightgreen; width: 100%; margin: 0 auto; }