Question

I have an element (in my case a HR tag) that needs to be as wide as the browser but which is also wider than it’s parent container. However, it still needs to maintain relative positioning so that it scrolls vertically with the page. The problem is that my parent div has to have relative positioning as well (due to other layouts that are working).

The only way I have been able to solve this is to set the width of the HR tag to 3000px with a left position of -1000px. This works, but it adds a horizontal scrollbar to the page (to display the 3000px width). Is there any way to accomplish this cleanly (without the horizontal scroll bar)? You can see my fiddle at http://jsfiddle.net/UGwst/.

Here’s the HTML:

<div id="layout-wrapper">
  <p>Above Content</p>
  <div id="content-wrapper">
    <p>Top Content Here</p>
    <hr class="rule" />
    <p>Bottom Content Here</p>
  </div>
</div>​

Here’s the CSS:

#content-wrapper {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  background-color: #ddd;
  position: relative;
}
.rule {
  background-color: #dbb328;
  height: 5px;
  position: relative;
  left: -1000px;
  width: 3000px;
}
​

I realize that there are a couple of other questions here that are similar, but don’t quite seem to fix this issue.

Answer 1

Use position:relative on the parent.

Use position:absolute on the HR, that way the HR is bound to the parent and will scroll with it.

To hide scroll bars use overflow:hidden on your outer wrapper, or BODY.