Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Fixed position relative to parent container

    I did a lot of research on this but apparently it's not possible with pure html/css as position:fixed only fixes it to browser window, so I thought I'd ask in this section.
    I have a page container, and inside it are two sections. The left section is a vertical nav bar with some links, while the right section is the actual page content. I want the right side to be scrollable, but the left side to be fixed to the page container (ie won't scroll when I scroll that page), but be able to move when I scroll the entire browser window.

    Code:
    <div id="pagecontainer">
    
        <div id="linkspage">
    
            <div class="sidelinks"> <!--UNSCROLLABLE-->
                <a href="#page1" class="link">Link 1</a>
                <p>
                <a href="#page2" class="link">Link 2</a>
                <p>
                <a href="#page3" class="link">Link 3</a>
                <p>
                <a href="#page4" class="link">Link 4</a>
                <p>
            </div>
    
            <div class="linkscontent"> <!--SCROLLABLE-->
                content of links page
            </div>
    
        </div>
    
        //OTHER PAGES
    
    </div>
    I've already tried to set #pagecontainer and #linkspage to position:relative, and .sidelinks to position:absolute, that doesn't do anything as far as I can tell... or it just doesn't do what I want.

    Here's a picture:



    Thanks.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Code:
    #pagecontainer {position:relative;}
    #pagelinks {position:absolute;left:0;top:0;}
    That combination of relative and absolute fixes the second div at the specified top left position relative to the first div and it will stay at that position relative to the first div even if the first div is scrolled.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've already tried that, like I said in the first post. It doesn't work (at least not in firefox), the nav bar still gets scrolled.

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    I'm not sure I'm understanding you right, but don't you simply want to put the div with the links to a fixed positioning and use the overflow property on the content?

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I need to have the nav bar and page content inside the same div. This is because I need to fade in/out the #linkspage. Of course I can have one side static and the other side scrollable if I separate them into completely unrelated divs like this:
    Code:
    <div id="pagecontainer">
        <div class="sidelinks">links links links</div> + some css styling to make this static
        <div id="linkscontent">text text text</div> + some css styling to make this overflow scroll enabled
    </div>
    but that would get very messy as it's treating them as two separate pages.
    Instead of simply:
    Code:
    $('#linkspage').fadeIn();
    I'll have to call:
    Code:
    $('.sidelinks').fadeIn();
    $('#linkscontent').fadeIn();

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    as a half arsed workaround, could it not just be

    Code:
    $('#linkspage .sidelinks').fadeIn();
    ?

  • #7
    New Coder
    Join Date
    Sep 2011
    Posts
    44
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That's just shortening the javascript...
    Like I said I need to have them in the same page for organization purposes.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    the scroll in your illustration is poor UI because it's visually detached from the actual scroll-able area.
    considering that, and how difficult it is to get to work, may i suggest the following simple pattern instead:

    Code:
    <html>
    <body>
    <style type='text/css'>
    	html { position: absolute; }	
    	body {position: relative; }
    	html, body { margin:0; padding:0; height: 100%; width: 100%; overflow: hidden;  background: rgba(0,0,0,0.08); }
    	#pagecontainer, #linkspage, .linkscontent, .sidelinks { position: relative; height: 98%; top: 1%;  background: rgba(0,0,0,0.08);  vertical-align: top; }
    
    	.sidelinks { width: 20%; display: inline-block;  }	
    	.linkscontent { overflow: scroll; overflow-x: hidden;  width: 75%; display: inline-block;   }
    
    </style>	
      
      <div id="pagecontainer">
    
        <div id="linkspage">
    
            <div class="sidelinks"> <!--UNSCROLLABLE-->
                <a href="#page1" class="link">Link 1</a>
                <p>
                <a href="#page2" class="link">Link 2</a>
                <p>
                <a href="#page3" class="link">Link 3</a>
                <p>
                <a href="#page4" class="link">Link 4</a>
                <p>
            </div>	
    
            <div class="linkscontent"> <!--SCROLLABLE-->
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
                content of links page <br />    content of links page <br />  content of links page <br />   content of links page <br />  content of links page <br />
            </div>
    
        </div>
    
        //OTHER PAGES
    
    </div>
    </body></html>
    this needs no fixed positioning, no javascript, and is very easy to modify without breaking the layout.
    Last edited by rnd me; 03-03-2013 at 02:59 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • Users who have thanked rnd me for this post:

    Windbrand (03-06-2013)


  •  

    Tags for this Thread

    Posting Permissions

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