Note that there are some explanatory texts on larger screens.

plurals
  1. POPartially hide flanking divs on resize
    primarykey
    data
    text
    <p>After nearly an hour of searching, and another hour experimentation, I can't seem to find how to do this in CSS/HTML.</p> <p>Given the following image where the blue box is a div holding the page's primary content at a fixed pixel width, the red boxes are divs holding decoration at a fixed pixel width, and the black line shows the browser size:</p> <p><img src="https://i.stack.imgur.com/MmhU9.png" alt="example of browser sizes with div boxes"></p> <ul> <li>A - Would <strong>not</strong> feature a horizontal scroll bar as nothing is hidden. Everything is centered.</li> <li>B - Would <strong>not</strong> feature a horizontal scroll bar as only the side divs are hidden. The main div is centered.</li> <li>C - <strong>Would</strong> feature a horizontal scroll bar as now the main div can't fit on the page. the main div is center, and it shouldn't be possible to scroll to see the side divs.</li> </ul> <p>I want to add extra decoration to the page without hurting it for users with smaller screen resolutions or simply upon window resize. The main div will hold the primary content, so the user should be able to scroll to see it all. On the other hand, the side divs are there only for decoration, so the browser shouldn't scroll based on them. I'd rather not set the side divs instead up as a background image as I'd like increased freedom beyond this.</p> <p>It <em>seems</em> like this should be possible. Is it? I've been playing around with overflow but I can't get anything to work.</p> <p>(To be clear, this is about horizontal centering/scrolling, not vertical)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload