DrTchocky DrTchocky - 2 months ago 7
CSS Question

overflow-x stacks divs on window resize

I would like to setup a horizontal container that holds multiple (smaller) columns within it. I have the following setup:

http://jsfiddle.net/f464W/1/

As you can see, when you resize the window, the .column containers just stack vertically when the width of the window is too small to contain them all.

Shouldn't

overflow-x: hidden


Stop the .column class from being displayed when they run off the side of .container?

Answer

Add white-space: no-wrap the .container

http://jsfiddle.net/feitla/f464W/17/

.container {
    max-height: 600px;
    width: 100%;
    margin-top: 100px;
    background: red;
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;
}