6

In FX and IE the following code makes two bars, but the blue one is slightly wider than the browser screen. Any resizing will leave a horizontal scrollbar with the tail of the blue bar offscreen to the left. This is boiled down from a much larger page and I can't remove the position:absolute element in the original. Can anyone figure out how to make the blue bar only 100% wide so it matches the red one and doesn't cause a horizontal scrollbar? Any ideas what's behind this behavior? I'm stumped. Thanks very much.

<hr style="border:1px solid red; width:100%;"/>
<hr style="position:absolute; border:1px solid blue; width:100%;" />
nhinkle
  • 1,157
  • 1
  • 17
  • 32
rdgWarren
  • 87
  • 1
  • 8

1 Answers1

11

Simply:

body {position:relative;}

Demo http://jsfiddle.net/qyvtzyfh/

Reason:

In a very short simplified description, position:absolute; and width:100%; on 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 since you don't have it, it gets the width of the initial containing block (which contains the html element as well) instead of the body, by adding position:relative; to body you make the width of the element relative to body (besides its position).

Arbel
  • 30,599
  • 2
  • 28
  • 29
  • 1
    In fact, if there's no ancestor element having a `position` of anything other than `static`, `absolute` positioned elements will respect to the **initial containing block** - not the `` element itself - in which the root element sits; If you give an explicit width the `` element, [you'll see](http://jsbin.com/hugede/1/edit) an `absolute`ly positioned element having `right: 0` declaration doesn't respect the width of `` element. You could find more details [here](http://stackoverflow.com/a/25866405/1725764) – Hashem Qolami Sep 17 '14 at 22:08
  • @HashemQolami True, that's why I said "In a very short simplified description", talking about the specific code situation of the OP, not the general definitions of the box model, but I updated the answer, thanks. – Arbel Sep 17 '14 at 22:15
  • @Arbel Thanks for the update. I understand your point of view. However IMO it might cause a misunderstanding which probably would lead the readers to trouble. – Hashem Qolami Sep 17 '14 at 22:20
  • @HashemQolami You are welcome, I respectfully agree and abide by your opinion :) – Arbel Sep 17 '14 at 22:23
  • Thanks for the information! W3Schools says that it will revert to the . And this does appear to be true. I stumbled across a solution, which was to add style="margin:0" to the body tag. So the first HR appeared to honor a default margin on the body, while the second, absolute one skipped back to the html tag, which had no default margin. That's my guess. At any rate the margin:0 made it work. I'm going to mess with the solutions you gave. Thanks, all. – rdgWarren Sep 17 '14 at 22:42
  • @rdgWarren You are welcome. Keep in mind that in your situation margin:0 actually just makes the issue 'not apparent' since it will hide the differences in the parents' widths, but it's not a fundamental solution. – Arbel Sep 17 '14 at 22:50
  • @Arbel I [tried to edit your answer](https://stackoverflow.com/review/suggested-edits/5796363) to show a [stack snippet](http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/?cb=1) of the answer so the demo would be available in-page, but it was rejected because the suggested edits review queue doesn't show stack snippets properly. You might be interested in adding it yourself; I think this is a good type of post for it as the demo is very simple. – nhinkle Sep 17 '14 at 23:26