Position: absolute makes the hr element more than 100%

Question

In FX and IE, the following code creates two bars, but the blue color is slightly wider than the browser screen. Any resizing leaves a horizontal scrollbar with the edge of a blue stroke on the screen to the left. This falls off a much larger page, and I cannot remove the position: an absolute element in the original. Can someone figure out how to make the blue bar just 100% wide so that it matches the red one and doesn't cause a horizontal scrollbar? Any ideas what is behind this behavior? I'm at a dead end. Thank you very much.

<hr style="border:1px solid red; width:100%;"/> <hr style="position:absolute; border:1px solid blue; width:100%;" /> 

Answer 1

Just:

 body {position:relative;} 

Demo http://jsfiddle.net/qyvtzyfh/

Cause:

In a very brief simplified description, position:absolute; and width:100%; in the element, make the width of the element relative to the immediate parent with an explicitly defined position:relative; or position:absolute; , in your case, t, it gets the width of the original containing block (which also contains the html element) instead of body , adding position:relative; in body , you make the width of the element relative to the body (in addition to its position).