Question

I’m trying to do an iphone style swipey thing on my webpage. The idea is that in my sidebar, if I click a link it will side the sidebar to the left to reveal where that link would go to. To do this, I am creating two sidebars side by side, the visible sidebar and the next sidebar that will be hidden behind another element.

An example of the sidebars can be found at http://jsfiddle.net/gpcC6/7/

The problem I’m having, is when the window is resized, the second sidebar goes under the first. I want to to stay to the right, even if it means that it goes off the side of the screen. Is this possible?
Thanks

Answer 1

Put the sidebars in a container that has white-space: nowrap and make them display: inline-block instead of floating them and it should work as per your instructions.

---

Note that white-space: nowrap in some browsers will interpret the space between two divs in the HTML as an actual space

<div>
</div><!-- SPAAAAAACE -->
<div>
</div>

To remove that spacing you need to place them on the same line

<div>
</div><div>
</div>

Alternatively, you can add a font: 0; to the parent element, in this case the container that will remove the spacing as well, but beware that you need to explicitly define the font size for all elements before you do that, otherwise all the child elements will have a font size of 0 as well. 😉

See this question and this article for more information.

---

Sample | Code

CSS

div{
    font-size: 16px;
}

#topbar {
    height: 40px;
    background-color: blue;
}

.wrapper{
    white-space: nowrap;
    font-size: 0;
}

.sidebar {
    width: 200px;
    display: inline-block;  
    white-space: normal;
}

.title {
    height:30px;
    background-color: red;
}

.main {
    height: auto;
    overflow: scroll;
}

HTML

<div id="topbar">
    hello
</div>
<div class='wrapper'>
    <div class="sidebar">
        <div class="title">
            title
        </div>
        <div class="main">
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </div>

    </div>
    <div class="sidebar">
        <div class="title">
            title
        </div>
        <div class="main">
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </div>      
    </div>
</div>