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>
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>
6 Answers
Reset to default 6hr {
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.
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
The default user agent stylesheet for the
(Horizontal Line) HTML element is :
hr {
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;
}
If you want to fix horizontal scroll across the HTML document then follow the solution:
Solution#1:
hr{
width: 100%;
box-sizing: border-box;
}
Solution#2:
hr{
width: 100%;
border-left: 0px;
border-right: 0px;
}
Setting the border width to 0 will fix this.
http://jsfiddle/chuckplayer/AuC8b/
* {margin: 0; padding: 0; border: 0}
<div id="divtest" width="100%">
<hr size="2" width="100%" id="hrtest" />
</div>
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);
If you really want the <hr> to match the exact width of the body then I would remend hiding the border style of the <hr> and using a background-color with a height: 1px. You can view the code here: http://jsfiddle/helpinspireme/fg6Mp/3/
CSS
hr{
border-style: none;
background: #000;
height: 1px;}
jQuery
var body_width = $('body').width();
var div_width = $('div').width();
var hr_width = $('hr').width();
alert(body_width);
alert(div_width);
alert(hr_width);
HTML
<div>
<hr/>
</div>
Use a table as follows:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<!-- your htlm block -->
</td></tr>
<tr><td style="border-bottom: 1px solid black;" height="50">
</td></tr>
</table>
You can play with the height of the row or use border-top, each time you need a hr add this row in your table