What CSS should I use to create a series of horizontal, non-wrapping blocks?

Question

I have a set of dynamically generated content - anywhere between 1 and about 25 blocks (each of which I want to be about 250px wide.

Clearly, this can run off-screen, but that's fine since my design allows for horizontal scrolling (using jQuery - I don't want the browser to do it with its own scroll bars).

So what CSS - cross-browser - is the best approach? Floats seem to wrap unreliably, and the dynamic nature of the content which changes frequently through ajax calls - means that recalculating the container width is not very practical.

Other CSS-based option?

Answer 1

Use a div container with the absolute witdh set, allow overlow, and floats for each box. This will allow the boxes overflow off the right of the screen.

Answer 2

#container { 
  overflow-x: auto; 
  white-space: nowrap; 

  width: XXXpx; height: XXXpx;
}
#container .block { 
  float: left; 
}

The overflow-x setting will ensure a scrollbar if the content extends beyond the width, the white-space setting will ensure all content is on one line.

Answer 3

Other than floats? Tables :D Seriously, use floats.

Answer 4

Here is a similar question

Why not use single row table, in spite of standards?

Because if you won't make the container element fixed width, all those whitespace and inline-block elements won't work, so the contents will wrap as well. And if I don't know actual width of the gallery (which I can't know, as far as content is added dynamically), I cannot specify it's width like that.