Menu
Could you tell me how to limit content width to the screen boundary? For the following script i always get 2px width wider than screen (allowed space) width.
document.body.scrollWidth is always 2px wider than screen
<html>
<head>
<style>
* {margin: 0; padding: 0}
</style>
<script type="text/javascript">
function test(){
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);
alert(screen.width);
}
</script>
</head>
<body onLoad="test()">
<div id="divtest">
<hr size="2" width="100%" id="hrtest" />
</div>
</body>
</html>
602
asked Sep 10 '25 10:09
hr {
border-right : 0;
border-left: 0;
}
Should do it. You may wish to add important to the style, or iterate through all hr in document and set in-line style.
102
answered Sep 13 '25 01:09
I believe that the problem is the browser is adding a 1 px border to build the hr. Inspecting the hr with chrome shows us the following styles applied by default to all hr's:
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
Disabling the border-width: 1px; will give the expected results, but hides the hr. Anyway, removing the hr's width works :P
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
