Absolute Positioning Causing Horizontal Scrollbar

[pealo86]

On the following page:

http://www.mattpealing-server.co.uk/~devcurti/

 

I'm positioning #banner-disc like so:

#banner-disc {
    background: url("../image/banner-disc.gif") repeat scroll 0 0 transparent;
    clear: both;
    display: block;
    height: 270px;
    margin-right: -100px;
    position: absolute;
    right: 0;
    top: 0;
    width: 846px;
    z-index: 0;
}

 

However it's causing a horizontal scrollbar at a 1024px wide display. I've tried other ways of positioning the element, even using relative positioning. However I just can't seem to get rid of the scrollbar.

 

Can anyone else see what I'm doing wrong?

[rythemton]

I just went to the web site with two different browsers (FireFox and Chrome) and didn't see the scroll bar issue you are having.

[pealo86]

Oops, managed to fix it in the end.

 

Turns out it's more common than I thought:

http://stackoverflow.com/questions/6111823/disable-horizontal-scrollbar-due-to-a-div-with-positionabsolute-which-is-outsid

 

Adding left:-100px is fine but browsers don't seem to like it on the right!?

 

Thanks anyway though!