Why does setting css to "float:left" make the div shrink to a narrow width?

Why does setting css to "float:left" make the div shrink to a narrow width?

I am having a problem with .css('float' ,  'left');
Let me give you some background:
I looked at the coda-slider plugin, which slides panels across the screen.  I thought a nice effect would be to slide the entire screen, not just a panel in the screen.
So I looked at the HTML for the coda-slider, and it demands several nested DIVs.  The innermost Div is of class ".panel".
I saw that these DIVs all had widths set to something in the css, so I got rid of all those widths (given that I want the entire screen to scroll, I guess I would want a width of 100%).  
But the interesting thing is that the 'panel' DIV shrinks from being the full width of the screen to being two inches wide.  
So I looked at the javascript code, and I found the line responsible.
It says:
        $panels.css({ 'float': 'left', 'position': 'relative' }  );
Making the DIV float left is the problem.  As soon as that happens, the DIV shrinks in width.
You can see it happen at the offending page:
As part of my debugging, I have put borders around the various DIVS, and typed their names into the webpage, and you can see the panels look OK, and then a diagnostic alert tells you that the javascript is about to 'float left', and then you see the panel shrink.
Any help is appreciated.
Thanks,
Gid