0

I have a website with two divs aside the main body, on the left and right side, and both of them have images which are approximately 500px in width, combined with the main body width of 980px (it makes them larger than any normal screen resolution).

HTML:

<body>
    <div id="#brandLeft">..</div>
    <div id="#brandRight">..</div>
    <div id="#mainbody">..</div>
</body>

CSS:

#brandLeft {
    display: inline-block;
    height: 890px;
    left: 50%;
    margin-left: -1010px;
    position: absolute;
    top: 171px;
    width: 350px;
}

#brandRight {
    display: inline-block;
    height: 890px;
    position: absolute;
    right: 50%;
    margin-right: -835px;
    top: 171px;
    width: 350px;
}

In the body I've already set the overflow-x: hidden, so I don't see the vertical scroll bar, but the page is still scrollable with the arrows and with the mouse center button.

I can't use jQuery to disable the scrolling so I was wondering if there's a way to have the divs with the large images, without having a scroll bar on the website?

Littm
  • 4,923
  • 4
  • 30
  • 38
GixxerMKD
  • 11
  • 2

1 Answers1

0

Your images are to big for the side bars, so try this. Remove the width and height of your images from the actual html. Control the width/height of the images by using something like..

#brandleft, #brandright img {
width:100%;
}

Doing somethign like that should scale your images to the size of the Divs on the left and right side to get rid of the scroll bars. If that doesn't work let me know.

Dan G
  • 24
  • 3