This size of this element is fixed to 100px.
It will probably be a menu or a banner.
The minimal size of the red container (marked in light red) is 400px ยท 800px.
Scrollbars will be displayed in very small browser windows.

Vertical and Horizontal Centering in CSS

↑ The heading ↑ is absolutely positioned so that it does not interfere with the ↓ main content ↓. Its size is set to 80% of the page.
This element has a fixed size and is centered vertically using the negative margin centering technique.
If the there is not enough room for this element, its content will overlap or underlap with other content on the page.
Its distance to the right is 2% of the outer container.
This is the central text (or image).
It can be of arbitrary height and width.
The difference to many other vertical centering solutions is
that this one uses a table element with table-layout: fixed;.
The main limitation is that the size of the menu must be known in advance.