Results 1 to 4 of 4

Thread: div scroll bar not working with overflow:auto

  1. #1
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default div scroll bar not working with overflow:auto

    Hello everyone, relatively new web developer seeking help! I'm working on a template that will eventually be used with Joomla, but right now I'm just concerned about getting the layout to work with just the HTML and CSS. A little background first:

    I want to create a fixed frame around the webpage that expands and contracts to fit different resolutions and browser window resizing, and then have the content scroll inside of that frame. The frame is also comprised of transparent PNG's since the client wanted lots of art on the frame around the content. My solution to keep the graphical layout liquid was to chop the frame up into 3 bits: the left side that was absolutely positioned to the left side of the screen, a right side that was similarly positioned to the right, and a thin strip that could be repeated horizontally as much as necessary to fill the gap in between.

    Right now It mostly works in Firefox, and is a giant mess in IE, but that's a whole other problem that I'll deal with after. I'd like to get it working in the standards compliant browsers first and then figure out some hacks that I can use for IE. Hopefully I can do that....

    Here is my HTML:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE>Site Test</TITLE>
      <link rel="stylesheet" type="text/css" href="site_test.css" />
     </HEAD>
    
     <BODY>
    <div id="wrapper">
    
    <div id="frame_left">
    </div><!--End frame_left-->
    
    <div id="logo">
    </div><!--End logo-->
    
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    etc, etc, 
    
    </div><!--End content-->
    
    <div id="frame_right">
    </div><!--End frame_right-->
    
    </div><!-- End wrapper -->
      
     </BODY>
    </HTML>
    Here is my style sheet:

    Code:
    #wrapper {
    	margin: 0px;
    	width: 100%;
    	height: 100%;
    	position: fixed;
    	top: 0px;
    	background-image: url(frame_middle.png);
    	background-repeat: repeat-x;
    	z-index: 10;
    }
    
    #frame_left {
    	margin: 0px;
    	background-color: transparent;
    	background-image: url(frame_left2.png);
    	background-repeat: no-repeat;
    	width: 224px;
    	height: 625px;
    	position: fixed;
    	left: 0px;
    	top:0px;
    	z-index:50;
    }
    
    #frame_right {
    	margin: 0px;
    	background-color: transparent;
    	background-image: url(frame_right2.png);
    	background-repeat: no-repeat;
    	width: 198px;
    	height: 625px;
    	position: fixed;
    	right: 0px;
    	top: 0px;
    	z-index: 25;
    }
    
    #logo {
    
    	margin: 0px;
    	background-color: transparent;
    	background-image: url(pink_logo2.png);
    	background-repeat: no-repeat;
    	width: 316px;
    	height: 125px;
    	position: fixed;
    	top: 0px;
    	left: 34.5%;
    	z-index: 75;
    }
    
    #content {
    
    	background-color:transparent;
    	position: fixed;
    	top: 145px;
    	bottom: 60px;
    	left: 160px;
    	right: 150px;
    	width: auto;
    	height: auto;
    	overflow: auto;
    }
    In FireFox everything works in terms of positioning and the scroll bar pops up, but won't actually scroll anywhere, even though there is content off screen? Any thoughts?

    I am slightly concerned that this is just totally undoable, but then I look at some of the stuff on CSS Zen Garden and think that there must be a way to pull it off!

    Any help is very, very much appreciated.

  2. #2
    Join Date
    Jun 2009
    Location
    UK
    Posts
    19
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    You could try this instead of auto, I'm not too familiar with the overflow function in CSS but I use it quite often in my CSS layouts. If the content is within a div and overlapsing outside of the div area, then this should do the trick.

    Code:
    overflow: hidden;
    So where your overflow is now just delete auto and replace it with hidden.

    Hope this helps, if it don't then let me know...

  3. #3
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I think your problem is that your content div has fixed position. I had a similar problem - and everything worked fine after I set the div's position to relative that I was trying to scroll.

    Let me know if that fixes it for you...

  4. #4
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Found a solution

    Hi,

    I had the same problem today, I could resolve it by giving height value same the container. For ex:
    #container{
    width: 100%;
    height: 500px;
    overflow: hidden;
    }
    #scrollingDiv{
    width: 100%;
    height: 500px;
    overflow: scroll;
    }

    This will work. In you code you assigned height and widths as auto. Thats why it was not working.

    Thanks,
    Yamini

Bookmarks

Posting Permissions

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