tablet panels

by bgmort

HTML

<div id="page-container">
<div id="left-pane">
    <ul id="accordion">
        <li id="titles">
            <div id="titles-header">
                <h3>Titles</h3>
            </div>
            <div id="titles-content">
                titles/category list here
                <ul>
                    <li>title 1</li>
                    <li>title 2</li>
                    <li>title 3</li>
                    <li>title 4</li>
                    <li>title 5</li>
                    <li>title 6</li>
                    <li>title 7</li>
                    <li>title 8</li>
                    <li>title 9</li>
                    <li>title 10</li>
                </ul>
                titles/category list here
                <ul>
                    <li>title 1</li>
                    <li>title 2</li>
                    <li>title 3</li>
                    <li>title 4</li>
                    <li>title 5</li>
                    <li>title 6</li>
                    <li>title 7</li>
                    <li>title 8</li>
                    <li>title 9</li>
                    <li>title 10</li>
                </ul>
            </div>
        </li>
        <li id="filters">
            <div id="filters-header">
                <h3>Filters</h3>
            </div>
            <div id="filters-content">
                Filter list here
                <ul>
                    <li>filter 1</li>
                    <li>filter 2</li>
                </ul>
                titles/category list here
                <ul>
                    <li>title 1</li>
                    <li>title 2</li>
                    <li>title 3</li>
                    <li>title 4</li>
                    <li>title 5</li>
                    <li>title 6</li>
                    <li>title 7</li>
                    <li>title 8</li>
                    <li>title 9</li>
                    <li>title 10</li>
                </ul>
            </div>
        </li>
    </ul>
</div>
<div...

CSS

<style type="text/css">
#page-container {
    height:100%;
    width: 100%;
    overflow: none;
}
#left-pane {
    /* pane basics */
    position: absolute;
    width: 300px;
    top: 0px;
    bottom:0px;
    left: 0px;
    overflow: scroll;
    /* styles */
    border-right: 1px solid #aaa;
}
#middle-pane {
    /* pane basics */
    position: absolute;
    width: 300px;
    top: 0px;
    bottom:0px;
    left: 300px;
    overflow: scroll;
    /* styles */
    border-right: 1px solid #aaa;
}
#right-pane {
    /* pane basics */
    position: absolute;
    top: 0;
    bottom: 0;
    left:600px;
    width: 100%;
    overflow: scroll;
    box-sizing: border-box;
    border-left: 50px solid #eee; /* we would put some sort of arrow/handle icon here */
    /* styles */
    padding: 1em;
}
</style>

<!-- head hacks -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
</style>