I've encountered a puzzling issue... I attempted to position an element at the far right of the page using CSS 'right: 0px'. However, it appears that my element is actually being placed slightly further right than intended, causing part of it to be cut off.
In order to troubleshoot the problem, I have simplified the scenario to the following HTML code.
It appears that an element with a width of 100% (including the body!) is wider than the viewport, yet still triggering scrollbars. It's quite perplexing… What am I missing here?
<!DOCTYPE html>
<html>
<head>
<style>
body{
overflow: auto;
}
#div1{
position: absolute;
top: 50px;
left: 0px;
width: 100px;
height: 145px;
background-color: red;
}
#div2{
position: absolute;
top: 250px;
left: 0px;
width: 100%;
height: 145px;
background-color: red;
}
.block{
position: absolute;
width: 30px;
height: 20px;
background-color: yellow;
}
.sub0{top:0px; right:0px;}
.sub1{top:25px; right:1px;}
.sub2{top:50px; right:2px;}
.sub3{top:75px; right:3px;}
.sub4{top:100px; right:4px;}
.sub5{top:125px; right:5px;}
</style>
</head>
<body>
<div id="div1">
<div class="block sub0">0PX</div>
<div class="block sub1">1PX</div>
<div class="block sub2">2PX</div>
<div class="block sub3">3PX</div>
<div class="block sub4">4PX</div>
<div class="block sub5">5PX</div>
</div>
<div id="div2">
<div class="block sub0">0PX</div>
<div class="block sub1">1PX</div>
<div class="block sub2">2PX</div>
<div class="block sub3">3PX</div>
<div class="block sub4">4PX</div>
<div class="block sub5">5PX</div>
</div>
</body>
</html>