www.webdeveloper.com
Results 1 to 7 of 7

Thread: Preventing horizontal scroll on overflow auto

  1. #1
    Join Date
    Apr 2009
    Posts
    346

    Preventing horizontal scroll on overflow auto

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

    HTML Code:
    <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.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    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)?
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Apr 2009
    Posts
    346
    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.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Apr 2009
    Posts
    346
    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!

  6. #6
    Join Date
    Apr 2009
    Posts
    346
    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.

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    No horizontal scrollbar in FF3.5.8, Chrome 4.1, or IE8
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles