Question

I have a fixed div and need the content to be able to be scrolled when its width exceeds the window size. I need this div with position: fixed because it’s next to a column with display: none, and if I float it or position it in any other way it will take up the space of that hidden column. So the problem is I can’t make the scroll work within this div. It’s a pretty big CSS so I’ll post what I think is relevant.

CSS

#main {
    background-color: yellow;
    height: 100%;
    overflow: auto;
    position: fixed;
    top: 10px;
    left: 380px;
}

#container {
    background-color: red;
    height: auto;
    margin-left: 20px;
    width: 700px/*655px*/;
    overflow: auto;
}

#tabs {
    background-color: blue;
    float: left;
    height: 100%;
    margin-top: -187px;
    margin-left: 20px;
    width: 500px/*50%*/;
}

ul#slider {
    height: 350px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 700px;
    overflow: hidden;
    position: relative;
}

ul#thumb {
    background-color: #000;
    list-style: none;
    margin: 0 0 0 500px;
    width: 200px;
    position: relative;
    overflow: auto;
    /*overflow: hidden;*/
}

ul#thumb a {
    border: 1px solid #bfbfbf;
    display: block;
    float: left;
    height: 40px;
    margin: 10px 0 10px 24px;
    width: 40px;
    opacity: 0.75;
    overflow: hidden;
}

And the HTML:

<div id="main">
<div id="container">
    <ul id="slider">
        <li id="1"><img src="img/img01.jpg" alt="img01" width="700" height="350" /></li>
        <li id="2"><img src="img/img02.jpg" alt="img02" width="700" height="350" /></li>
        <li id="3"><img src="img/img03.jpg" alt="img03" width="700" height="350" /></li>
        <li id="4"><img src="img/img04.jpg" alt="img04" width="700" height="350" /></li>
    </ul>
    <ul id="thumb">
        <li><a href="#1"><img src="img/img01.jpg" alt="img01" width="50" height="50" /></a></li>
        <li><a href="#2"><img src="img/img02.jpg" alt="img02" width="50" height="50" /></a></li>
        <li><a href="#3"><img src="img/img03.jpg" alt="img03" width="50" height="50" /></a></li>
        <li><a href="#4"><img src="img/img04.jpg" alt="img04" width="50" height="50" /></a></li>
    </ul>
    <img id="title" src="img/title.jpg" width="119" height="61" alt="" />
    <div id="tabs">
        <div class="verticalslider" id="text">
            <ul class="verticalslider_tabs">
                <li><a href="#">Tab 01</a></li>
                <li><a href="#">Tab 02</a></li>
                <li><a href="#">Tab 03</a></li>
                <li><a href="#">Tab 04</a></li>                        
            </ul>
            <ul class="verticalslider_contents">
                <li>
                    <table>
                        <tr><td>Description tab 01</td></tr>
                    </table>
                </li>
                <li>
                    <table>
                        <tr><td>Description tab 02</td></tr>
                    </table>
                </li>
                <li>
                    <table>
                        <tr><td>Description tab 03</td></tr>
                    </table>
                </li>
                <li>
                    <table>
                        <tr><td>Description tab 04</td></tr>
                    </table>
                </li>
            </ul>
        </div>
    </div>
</div>

The “container” div is the one that needs to be scrolled when resizing the browser window (I’m working with Opera and FF) but so far the content on the right just disappears and there’s no way to see it. The vertical scrollbar doesn’t show either but if I use the mouse wheel I can scroll down.

It’s a big code and I’ve tried many combinations already but I’m starting to go in circles. It’s probably an easy answer but It this point I can’t figure it out so an outsider perspective will help.

Answer 1

I need this div with position: fixed
because it’s next to a column with
display: none, and if I float it or
position it in any other way it will
take up the space of that hidden
column.

Hiding an element while preserving its size can be accomplished with a visibility: hidden style.