how to position two elements next to each other regardless of page size

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

I don't want the width of the sidebar to change. I want it to stay constant, and go off the page to the right if needed — dan, Apr 11 '12 at 12:07
@Dan, re posting similar question, is not going to give you working solutions. — Starx, Apr 11 '12 at 12:08
@Starx, it's a completely different question, I'm just using a similar example. This has nothing to do with scroll bars, this is to do with positioning elements — dan, Apr 11 '12 at 12:10
@dan, But it is going to come to the same, know the size of the elements game, isn't it? — Starx, Apr 11 '12 at 12:10
@Starx, I know the size of the elements here. I want the width to be exactly 200px. — dan, Apr 11 '12 at 12:12
@dan, What about the height? And what about those element that is supposed to be resided after this 200px element? — Starx, Apr 11 '12 at 12:13
@starx, what do you mean "And what about those element that is supposed to be resided after this 200px element?" — dan, Apr 11 '12 at 12:17
@Dan, Aren't you planning to reside a container after this element with 200px width. — Starx, Apr 11 '12 at 12:18

score 5 · Accepted Answer · edited May 23 '17 at 12:01

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>

@dan I updated my answer. Take note of what white-space does and it'll be easy sailin'! Happy coding! ;) — ShadowScripter, Apr 11 '12 at 12:41
What you have makes the elements align bottom. See http://jsfiddle.net/gpcC6/14/ . Is there a way to make them align top if they have different sizes? — dan, Apr 11 '12 at 12:53
@dan You expected it to be different? Inline elements follow the baseline, it works as it's supposed to. If you don't want them to be of the same height you need to use something else, like in [this example](http://jsfiddle.net/gpcC6/16/) I made, as [Sven Bieder's answer](http://stackoverflow.com/a/10105801/944301) proposed. By giving the container a max width corresponding to the sum of all sidebar widths, the floating elements won't be pushed down. — ShadowScripter, Apr 11 '12 at 13:03

score 2 · Answer 2 · answered Apr 11 '12 at 12:21

Put a wrapping div around your bars and give it a fixed width or a min-width. Then you must only look that your sidebars fit in this wrapping container next to each other. That guarantees that they stay next to each other even when the window is smaller and you can scroll horizontally.

how to position two elements next to each other regardless of page size

2 Answers2

Sample | Code