Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Chris Ki
Chris Ki
2,187 Points
Posted by Chris Ki
Chris Ki
2,187 Points

Making a Div Not Scrollable Without Using Position: Fixed;

Hi, I've been trying out multiple attempts, but still couldn't figure out the solution to my problem.

The website I'm creating is mainly divided vertically into two parts: a div for the left side content (id #leftside), and a 2nd div for the right side (id #rightside). And I'm trying to make only the div #rightside scrollable, while the #leftside remains fixed. Example site: http://madebypfd.com/website-design-and-photography-for-grays-bath

I can achieve that easily with position: fixed and some other css properties, but the problem comes in when the site is viewed on a smaller device. When viewed on a smaller screen, these two divs start overlapping on top of each other because the #leftside's position is fixed. They don't overlap if I remove the fixed position, but that means it will be scrollable again. So I'm stuck in this cycle, unable to figure out how to go on about this. Example site that I've posted above has done it beautifully, and I'm curious how it was done.

Below is part of my html:

<div class="jumbotron">      
    <div class="row">

        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5" id="leftside">
            <div class="noCollapse">
            <h1>Title</h1>
            <p class="roles">text for roles</p>
            <img src="">
            </div><!-- end of noCollapse -->

            <div class="showHide">
            <p class="fulldescription">paragraph 1</p>
            <p class="fulldescription">paragraph 2</p>
            <img src="" class="circleIcon">
            </div><!-- end of showHide -->

            <button type="button" class="btn btn-primary">Show More</button><!-- expand/collapse .showHide -->

        </div> <!-- end of leftside -->



        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7" id="rightside">
            <img src="" width="1127" class="scaling">
            <img src="" width="1127" class="scaling">
        </div> <!-- end of rightside -->

   </div> <!-- end of the main row -->
</div> <!-- end of the main jumbotron -->

part of css:

#leftside{
    margin-top: 12px;
    height:auto;
    text-align: left;
    padding: 50px 90px 0px 100px; /*top right bottom left*/
    /*
    border-right-style: solid;
    border-right-width: 5px;
    border-right-color: F26522;
    */

    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: b7b8bb;

    /*to make it not scroll
    z-index: 0;
    position: fixed;
    top: 50px;
    left:15px;*/
}

#rightside{
    margin-top: 12px;
    height:auto;    
    background:#FCF;
    text-align: left;
    padding-left:0px;
    padding-right:0px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: b7b8bb;

    border-left-style: solid;
    border-left-width: 5px;
    border-left-color: F26522;

    /*
    z-index: 0;
    position: absolute;
    right: 0px;*/

}

3 Answers

Jeff Wolfram
Jeff Wolfram
10,490 Points
Jeff Wolfram
Jeff Wolfram
10,490 Points

In the site you mentioned, they are using position fixed for the left side until the screen gets to a certain size and then it is switched to position relative. You will just need to use a media query.

Jenny Olsen
Jenny Olsen
2,099 Points
Jenny Olsen
Jenny Olsen
2,099 Points

Hi Chris,

I'm not entirely sure what you're trying to do here. The example site has normal page scrolling (i.e. both left and right sides scroll together), at least in Chrome.

That said, you might look into the overflow css property. Try overflow:auto for the side you want to scroll, and overflow:hidden for the non-scrolling side. You'll probably need to set a height for the non-scrolling div as well. CSS-Tricks has a good write-up on the overflow property: https://css-tricks.com/almanac/properties/o/overflow/.

Hope that helps!

Richard Alexander
Richard Alexander
22,633 Points
Richard Alexander
Richard Alexander
22,633 Points

I think what you're looking for is... position: sticky;. You can find a demo here, https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky. You can add pixels/em to the top property as needed, and possibly a bottom margin.