Expand div horizontally not vertically

Question

I have a div with

display:inline-block;
postion:relative;

inside a div with

display:block;
width:348px;
overflow:hidden;

When the contents of the inner div overflow, I want them to expand horizontally, not vertically. The contents of the inner div consists of thumbnails of photos

Answer 1

You just need to set white-space: nowrap on either of the divs (the property is inherited). (Source)

Sidenote: The inner div is not necessary for this to work.

Demo: JSFiddle

HTML

<div class="container">
    <div>
        <!-- Thumbnails -->
    </div>
</div>

CSS

.container {
    display: block;
    width: 348px;
    overflow: hidden;
    white-space: nowrap;
}

.container div {
    position: relative;
    display: inline-block;
}