Prevent elements from wrapping when resizing the window

Question

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;
}

Answer 1

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;
}