When you clear a float you clear all floats above it in the html which in your case is the floated left column so the element moves down below the left column just as you told it to do :). To contain the effect of the clear property the element must have a parent that establishes a new block formatting context. Elements which create block formatting contexts are floats, elements with overflow other than visible, elements with display:inline-block or table-cells.
The easiest solution in your case is to add an inner 100% wide floated element in the middle column to contain all the content in that column and to stop the clear affecting floats outside that current context.
You can do it without an extra div by using overflow:hidden on your centre column (and applying haslayout for IE6) but does mean that overflowing content may be hidden and possible a scroll bar may not appear when needed.
This old demo explains the problem and shows the solution.
The OPs demo is flawed as they have used camelCase in the html so the demo isn't working unless you change the classes to match the css