My page contains three elements:
at the top that covers the whole width of the screen with
width = screen.width;
to the left of the screen.
to the right of and with the same hight as the
All heights, widths, and margins are set with respect to
var w = screen.width/100;
var h = screen.height/100;
so that my page essentially looks the same in any display resolution. And they are set so that the width of
, and the margin between them all add up to
document.getElementsByTagName('main').style.width = 85.5*w + "px";
document.getElementsByTagName('aside').style.width = 14*w + "px";
document.getElementsByTagName('aside').style.marginRight = 0.5*w + "px";
(85.5 + 14 + 0.5 = 100)
The browser seems to think "What would happen if I display the scrollbars even though they are not needed?"
, and then notices that the scrollbars have a width > 0, which means that
are taking more space than available (since they are set to take up 100% of the screen width, and now there is a scrollbar competing for the space). The browser therefore decides to reposition my
and ruin my design.
And now since
the elements no longer fit inside the screen and the scrollbars are actually needed and therefore stay, even though they are the cause of their own existence (as far as I understand).
However, if I zoom out (so that the elements take less space) and zoom back in, this gets fixed in Google Chrome. It doesn't in Firefox, though. And even if it did, this behavior is unacceptable.
The simple workaround to this problem is to have
, but that is not an option for me.
This behavior appears very weird to me and I do not understand what is causing it.