I'm in the process of trying to center a div element. The div has a width of 400pt, while the body must have a minimum width of 500pt in order to leave at least a 50pt space around the div. Here is an example of my code:
<html>
<style>
body{
min-width:500pt;
}
#centered{
position:absolute;
background-color:#ff0000;
width:400pt;
left:calc(50% - 200pt);
height:400pt;
}
</style>
<body>
<div id="centered"></div>
</body>
</html>
When the browser window's width is greater than the set min-width, everything displays correctly:
However, if the browser window's width becomes smaller than the designated min-width and a scrollbar appears at the bottom, the div is no longer centered within the entire scrollable body but only within the visible space when the scrollbar is at the left:
Is there a solution to correct this issue?
If you're having trouble understanding the problem, please don't hesitate to ask for clarification.