Consider the page FlexibleGrids/Demos/inflexibledemo.html - open up the file in your browser. It's a layout similar to our Jazz Calendar page, but much more simple. A header (gray background) sits at top, two columns (red and blue) float left and right, respectively, in the middle of the page, and a footer (green) sits at bottom. The 960px-wide design is fixed in width and center justified. The columns split by a ratio of 600px (the left red column) and 360px (the blue sidebar).
But note that, when we resize the browser, the design remains at a fixed width:
A revision to this same page now shows a flexible, fluid grid - please check out the page FlexibleGrids/Demos/flexibledemo.html in your browser, too. Instead of a fixed, 960px container for the page, we now assign a width of 80% to the container. (80% is somewhat arbitrary, but seems close to the spirit of the original, fixed-width design.) Most importantly, we have set the width of the floated elements - the left red main column and the right blue sidebar column - with percentages rather than fixed pixels.
We find the relative percentage-width values by dividing the fixed width of the element by the width of its container element. Thus, for the left (red) sidebar, 600 / 960 = 0.625 - that's 62.5%. Similarly, the right (blue) sidebar gets a percentage width of 37.5%, since 360 / 960 = 0.375.
The design now shrinks or expands - with the entire design a percentage of the browser width, and the #maincontent and #sidebar elements scaling proportionally - as the browser resizes narrower or wider:
The markup remains the same - we've not updated the HTML, just the CSS. But this subtle change - moving from fixed pixel widths to flexible percentages - already goes a long way toward rendering the design more responsively.