Currently, I am facing a challenging task of creating a website with a layout that includes four corner images - TL, TR, BL, and BR marked by black blocks. The main content area, highlighted in dark orange (up to 960px wide), is surrounded by the green arrow which represents the browser window. You can view the diagram here.
The narrowest site width should not go below 960px to avoid displaying scrollbars. The positioning of the bottom left and right black block images should always be at the corners unless the width decreases to 960px or lower, causing them to overlap slightly with the main content area. However, when the site is shrinked significantly, such as to 200px, the BR image should not protrude into the corner.
I have attempted to use absolutely positioned divs to achieve this layout, but it falls short of working perfectly without Javascript or highly experimental CSS. While I prefer to avoid relying on JS, I am open to incorporating a bit of it if there are no other viable solutions available.
Your insights and assistance would be greatly valued in solving this dilemma!