Question

I am trying to float divs horizontally, however its falling into a new line.

http://jsfiddle.net/nyCrY/4/

It works only if I set width of the #holder higher than its content.

Is there a way to do this without setting the fixed width on #holder?

Thank you!

Answer 1

Not really with pure CSS.

You can use a static width (which you don’t want to do), you can use floats + whitespace (which is unreliable), or you can dynamically calculate the necessary width with javascript and set the style’s width to that number.

According to this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

I spent some time playing with the float property and the white-space
property to see if I could find a way to fight browser auto-wrapping,
but I didn’t have much luck. Page elements which are floated but do
not have a width exhibit a property where they expand to the width of
the content inside them. I thought perhaps if I put a bunch of float
elements inside of that, it might just keep expanding beyond the width
of the browser window. No dice. There is also a white-space: nowrap;
property in CSS which I thought might be able to be exploited to fight
the auto-wrapping, but it only works for text elements, not blocks or
just any old thing you set to inline. Oh well.

So, he basically is saying, no its not possible with just css.

But he goes on to say that you can do some javascript magic to achieve it:

JavaScript clearly has the ability to manipulate page elements and do
calculations on-the-fly.