Stopping floated divs from wrapping to a new line

Question

I have a container that contains a number of left-floated divs, something like:

<div id="container">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

<style>
    .panel {float:left; width:200px;}

</style>

In my app, the user can add more and more panels to the container dynamically, and I'd like them to always stack up on the right, and for a horiz scroll bar to appear when the user has exceeded the available space.

jsfiddle here: http://jsfiddle.net/yzTFC/6/

Answer 1

Floated elements are dependent upon the width of their container and do no affect the size of the container. If it is possible, do not use floated elements in this case. I would use display:inline-block with a white-space:nowrap on the parent.

http://jsfiddle.net/yzTFC/45/

Another method would be to give an insanely large width on the container but I wouldn't advise this as it is seems sloppy.

http://jsfiddle.net/yzTFC/52/

Here is a good article on how floats work: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/