0

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.

Community
  • 1
  • 1
bigmac
  • 2,553
  • 6
  • 38
  • 61

2 Answers2

1

Try 

body {overflow-x: hidden;}

to eliminate the horizontal scrollbar. According to this answer, it even works in IE6 - CSS - Only Horizontal Overflow?

Community
  • 1
  • 1
Scott S
  • 2,696
  • 16
  • 20
  • Since you both posted at the same time, I had to flip a coin on who's answer to accept, but thank you for the information. – bigmac Nov 08 '12 at 17:04
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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • I was hoping for a more elegant solution (the overflow attribute seems hackish to me), but it does work, so thank you for the information. – bigmac Nov 08 '12 at 17:04