Preventing horizontal scroll on overflow auto

[Ntrimgs]

I can't seem to get rid of the horizontal scroll bar - all I want is the vertical.


<div id="outer">
<div id="inner">
</div>
</div>


The outer div is set to relative, overflow=auto and it's width is 225px
The inner div has a width of 200px and is centered with left and right margin set to auto.

The inner div is loading images that are only 180px wide yet still I keep getting the horizontal scroll bar.

[aj_nsc]

is there padding being applied to anything? does the horizontal scrollbar actually scroll or is it grayed out? what browser(s)? could you post as much code from the page in question as possible (HTML/CSS)?

[Ntrimgs]

Here is the CSS:

#wrapper #member_three #image_viewer {
background-color: #E1E1E1;
height: 750px;
width: 225px;
position: absolute;
right: 0px;
top: 0px;
}
#wrapper #member_three #image_viewer #image_viewer_inner {
height: 730px;
width: 200px;
margin-right: auto;
margin-left: auto;
overflow: auto;
position: relative;
}
#wrapper #member_three #image_viewer #image_viewer_inner a img {
border: 1px solid #000000;
margin-top: 15px;
margin-right: 0px;
margin-left: 0px;


My mistake from above post - it is the INNER DIV that is set to overflow auto.

I am viewing it in the latest Internet Explorer and Firefox and it is an actual scroll bar.

[aj_nsc]

Just a couple of notes, from what I see, position: relative on the inner div does nothing. Also, is there a point to an outer and inner div? Why not just use one div to surround the image that is set to overflow: auto? None of these points solve your problem specifically yet, but hopefully they'll get you in the habit of thinking about the purpose of your divs before actually creating them - e.g. lots of people use one (or more!!!) so-called 'wrapper' divs when they're just not needed - which is what appears to be the case with your inner div here, looks like you just need one.

That's all speculation, your code might be perfect for what you need it for, but a full page (either a link or a full HTML source + image) would be useful. I can't see any glaring reason for it but it might become more evident if you showed full HTML and full CSS - lots of times CSS rules are cascaded down and applied to elements that you didn't mean them to be applied to - Firefox's webdeveloper toolbar can help with identifying what styles are on a given element.

In any case, from what I see, I think more code is probably necessary.

[Ntrimgs]

The reason I have the outer div is because it needs to be absolute positioned and I always thought you couldn't have overflow=auto with absolutely positioned elements.

The url is:

http://www.servisec.com/profile_view?id=

Don't worry about the blank id - it's still in testing phase.

I appreciate your help!

[Ntrimgs]

Sorry!

I figured it out.

I appreciate all your help but I left one detail out for you that I even forgot about until I looked at the code view in the browser....

I had a table set to 95% width wrapping the images. Duh!! I just set it to 90% and the problem is fixed.

Thanks again and sorry for wasting your time.

[aj_nsc]

No horizontal scrollbar in FF3.5.8, Chrome 4.1, or IE8