Question

I got a problem with CSS styling of a page.
Basically I have a div that will be used as a dialog in which I’d like to organize the content in 2 columns: the first one could contain a long list of elements, and should be scrollable, the second one should be small and in a fixed position. Thus I don’t want all the dialog content to be crollable but just the half of it.
I put toghether an example here on jsfiddle in case you need to do some try… the code is:

CSS

#container {
border: 1px solid black;
height: 200px;
}
#main {
    display: table;
    border: 1px dashed blue;
    height: 200px;
}
#row{
    display: table-row;
    height: 200px;
}
#leftPanel{
    display: table-cell;
    width: 50%;
    height: 200px;
    overflow: auto;
    border: 1px dotted red;
}
#rightPanel{
    display: table-cell;
    width: 50%;
    vertical-align: top;
    height: 200px;
}

HTML

<div id="container">
    <div id="main">
        <div id="row">
            <div id="leftPanel"> <!-- This one should be scrollable -->
                <!-- Long list of element here-->
            </div>
            <div id="rightPanel">
                <div style="height: 50px;">
                    Something here
                </div>
                <div style="height: 50px;">
                    Something else here
                </div>
            </div>
        </div>
    </div>
</div>​​​​​​​​​​​​​​​​​​​

How can I get leftPanel to be scrollable?
As you can see I tried even setting a fixed height of every component of the CSS table, but without any result… what’s wrong here?

Answer 1

Like this: http://jsfiddle.net/Zw8WK/10/

Using overflow-y: scroll or alternately overflow : scroll

Now if you need the height of the left column to be some kind of variable height it might be more tricky, here I am setting it to the height of the parent container.