How do you build a site that scrolls vertically in one div but horizontally only in a child div?

Question

I need to have a site where left (red) column is static, full height and not moving and the right column (the blue and green together) scrolls vertically and last that the bottom right(green) section will scroll horizontally.

I was able to partially get this by setting the green section to overflow:visible and the blue and green section together to overflow:auto, however that still leaves the blue section moving with the green section and shows an empty spot at the top right when scrolling horizontally.

Edit 1: I was also able to get a configuration that did this but on screens with long content the horizontal scroll-bar was pushed to the bottom of the vertical scroll section. This is less desirable than the issues I am currently having with the header.

Edit 2: Currently I am thinking I will need to use jquery or javascript to expand the left margin of the header section to push it over and back when the page is scrolled. I can't think of a way to get the number of scrolled pixels though.

site layout picture

Zachary Kniebel · Answer 1 · 2014-06-20T17:32:18.537

0

Have a look at the overflow-x and overflow-y properties.

overflow-x documentation

overflow-y documentation

Basically, you can use these two properties to control the direction in which the user is allowed to scroll. What you will want to do is have your right column (blue and green) scroll with overflow-y: scroll; and overflow-x: hidden and do the opposite for the last section (the horizontally scrolling one).

.col-right {
    overflow-y: scroll;
    overflow-x: hidden;
}
.col-right > .blue {
    overflow: hidden;
}
.col-right > .green {
    overflow-y: hidden;
    overflow-x: scroll;
}

I made up the class names and intuited the HTML structure that you are using, but you get the idea.

edited Jun 20 '14 at 17:32

answered Jun 20 '14 at 17:24

Zachary Kniebel

4,686
3
29
53

Thanks for the answer. This almost works except that long page content is pushing the horizontal scroll-bar out of sight until I scroll to the bottom. – OrangeKing89 Jun 20 '14 at 17:48
That's natural because you are scrolling the green section horizontally but not the blue section. If you are looking to do something different that I would first ask why you have two sections to scroll vertically with the same scroll bar but only one of them scrolls horizontally. That would imply that you are likely trying to do graphics or backgrounds with elements and not CSS. That's getting into no-no territory. – Zachary Kniebel Jun 20 '14 at 17:56
The issue is that I have content that sometimes doesn't fit onto the screen horizontally so I need to have a scrollbar to show it but when I scroll, the header is sliding under the navigation panel and leaving a blank spot on the right side. if I didn't have to show wide content horizontally I would not have a problem but the header is the big issue. – OrangeKing89 Jun 20 '14 at 19:16

score 0 · Accepted Answer · edited May 23 '17 at 10:29

Maybe the following is something which fits your requirements: http://jsfiddle.net/N6FfW/1/

HTML

<div id='left'>
</div>
<div id='wrapper'>
    <div id='top'>
    </div>
    <div id='bottomwrapper'>
        <div id='bottom'>
        </div>
    </div>
</div>

relevant CSS

/*box-sizing has to be added because we set a padding for #left and #bottom
which then would be bigger than they should. (It includes padding 
and border into the height and width)*/

#left, #bottom {
    box-sizing:border-box;
}
#left {
    float:left;
    background-color:red;
    width:200px;
    height:100%;
}
/*Overflow:hidden establishes a new Block Formatting Context for the
wrapper, which will prevent #left from intruding into it*/

#wrapper {
    overflow-y:auto;
    height:100%;
}
/*The following creates an invisible floated box with full height in the #wrapper*/

#wrapper:before {
    height:100%;
    float:left;
    content:'';
}
#top {
    background-color:blue;
    min-height:200px;
}
/*Position has to be set to relative, so that the contained box
#bottom can expand to full height and width of this wrapper
with height:100% and width:100%. We have to use a wrapper because
we can't set overflow-x:auto to this wrapper directly: This would
cause a new BFC to be established and the previously defined
left-floated box couldnt affect the layout of this box anymore,
it wouldnt expand to full height.*/

#bottomwrapper {
    position:relative;
}
/*Creates an invisible box at the end of #bottomwrapper, which
will be shifted downwards until it reaches the end of the
previously defined float:left box (clear:both is responsible
for that). This expands #bottomwrapper to full height, because
it will contain this invisible box in any case.*/

#bottomwrapper:after {
    content: '';
    display:block;
    clear:both;
} 
/*Position:absolute is used so that #bottom can be expanded to full height
and width of its parent container #bottomwrapper.*/
#bottom {
    position:absolute;
    height:100%;
    min-height:200px;
    width:100%;
    background-color:green;
    overflow-x:auto;
    white-space: nowrap;
}

I don't claim this is the best solution for your use case but as far as I have tested it, it worked well.

Further information about Block formatting Contexts: How does the CSS Block Formatting Context work?

This particular solution doesn't scroll the header section with vertical scrolling but this solution will work for me. Thanks. — OrangeKing89, Jun 23 '14 at 11:51
Glad that I could help, but what do you mean by scrolling the header section? — the_tiger, Jun 23 '14 at 12:11

How do you build a site that scrolls vertically in one div but horizontally only in a child div?

2 Answers2