Help understanding 2011 sidebar changing to 'float:none' w/ smaller screen size

I’m working on a layout where in the header there is a logo which floats left, the navigation which floats right, and I’ve mimicked the float w/browser resizing like the #primary / #content / #secondary work.

At one point I DID have the menu ‘float:none’ once the browser was resized to 600px (the menu stopped floating right and would go down below the logo in a full width, just like the #primary / #secondary do in the content area of the site)… but lord knows what I ‘undid’, and it isn’t doing it any more.

I would send much WP love and computing Karma out into the world if someone could give me some insight as to how the #secondary picks up the “float:none” once the screen size shrinks to 600px. ??

The page is set as a static page right now https://ratest6.com/A-2011Theme-Assembled.html. I’m asking this CSS question here on WordPress because this is directly from the 2011 theme.

And YES I do have Firebug. :-\ And yes, I can see it dynamically change from #secondary / float:right to #main #secondary / float:none; as I resize the browser, but I can’t wrap my mind around 1. why is the #main the important part that seems to make it work (what would I use in the header for my purpose).