调整窗口大小时防止元素包装

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

Answer 2

http://jsfiddle.net/CLErY/2/

/* The following rule can be romoved, is just to give a smooth overflow hidden visibility */
.content {
    width: 200%; /* Always bigger than the real value, so 200% is the double and it should work. */
}

.content should have at least the size of the whole element plus the size of one children (100px), so 200% is the double and it should work.

In case we have 4 squares the size should be (width x 4 + width) in case the width of the square is 100 the result is 500px.

Also this is to give a smoother overflow dissapear but not necesary.

Hope it helps.