Keep inner divs on same line though inner div width is greater than 100%

Question

I'm playing around with a slide menu. I need the content div to have a width of 100% and menu to have width of 16% (it's a long story). Of course, this results in the content div being pused to the next line. Is there a way to keep the inner divs on the same line, even though total percenatge is greater than 100%, with the right part of the content div off the screen? Here is the jsfiddle

Answer 1

Give a white-space: nowrap; to the #container element then override that declaration on its children elements:

EXAMPLE HERE

#container {
    overflow: hidden;
    white-space: nowrap;
}

#container > div {
    vertical-align: top;
    white-space: normal;
}

In addition you may need to use vertical-align: top; to align the inline block elements (the columns in this case) vertically at the top of the #container.

16.6 White space: the 'white-space' property

This property declares how white space inside the element is handled. Values have the following meanings:

nowrap value
This value collapses white space as for 'normal', but suppresses line breaks within text.

Also mind the gap between inline block element. Tabs and new lines in HTML counts a white space.

Answer 2

Additional to white space in #container you can use overflow:hidden and float:left to #menu element to prevent an issue when menu contains large text:

#menu{
    width:16%;
    border: 1px solid blue;
    display:inline-block;
    overflow: hidden;
    float: left;
}

fiddle