Several divs in a row, auto parent width

I am making a horizontal content slider, and need to put an arbitrary number of equally-sized elements in a row inside the slider div, so i can shift the slider div back and forth and display one element at a time on the page. These elements could be anything: divs, imgs, whatever.

Currently I am floating all the elements, and in order to prevent them from dropping onto the next row, using javascript to sum up the widths of all the elements on page load and manually fix the width of the slider in order to fit all of them.

Naturally I do not want to do this. I have looked at the CSS Flexible Box Model and it seems it would do what i need, but it does not appear very often outside of the W3C specification and i'm not sure how well supported it is. Does anyone have any experience using it? Apart from that, is there any other non-javasc开发者_开发百科ript way of lining up a bunch of divs side by side and having the parent expand laterally to fit?

Flexbox isn't really standardised or widely-supported enough to use yet. It's supported in newer browsers including IE10, but it's likely to be a long time before that's your baseline.

There are some ways to work around it. For example you can use white-space: nowrap to make inline children not fall down to the next line, in combination with float: left to make the parent shrink-wrap its width around the children. Then if you want the children to be stackable blocks you could use tables or inline blocks:

#slider { white-space: nowrap; float: left; border: dotted blue 1px;}
#slider .box { display: inline-block; width: 100px; border: dotted red 1px; }

<div id="slider">
    <span class="box">foo</span
   ><span class="box">bar</span
   ><span class="box">bof</span
   ><span class="box">zot</span
   >...
</div>

(Using <span> is needed for inline-block in IE7, and the odd > placement is to prevent unwanted whitespace between the boxes.)

As you may have seen, every browser may render things differently, but if you apply the style display:inline; to the elements in the slider, and width:auto; to the container element, they should not wrap.