Prevent elements from wrapping when resizing the window

css, html

Solution

Remove `position:absolute` and `overflow:hidden` from the parent element.

Since the elements are `inline-block`, you could use `white-space:nowrap` to prevent them from wrapping. If that's not the desired effect, just remove it though.

jsFiddle example

#container {
    width: 100%;
    height: 100px;
    white-space:nowrap;
}
.square {
    display: inline-block;
    width: 100px;
    height: 100px;
}

Problem

How can I prevent my squares from wrapping when resizing the window? I want the squares to stay at their positions, but every time I resize the window, they get pushed down and are hidden. This example is currently working, but the solution, which makes this possible, is just ridiculous. Is there a "cleaner" way or how can I make it look more professional? My JSFiddle Example ``` .content { width: 100000000px; } ```

Original source