CSS - Three Scrollable Equal-Height Main Content Columns (Fluid-Height) and Sticky/Always-Visible Footer

I've looked at practically all the posts here and on Google and can't seem to find the answer to my CSS layout question about "3 equal-height columns with a 'really' sticky footer", with the layout requirements as follows:

1. Top Header section, with a row for drop-down Menu options and another row for Toolbar buttons.

2. Main Content section, with 3 equal-height columns. The center column will have liquid width, the left and right columns will have fixed widths. All 3 columns will have fluid/variable heights, and开发者_如何学JAVA EACH COLUMN will automatically show/use its own Scroll Bar if there is more content than will fit in the available, visible content area of the column. In other words, the columns should NOT push down the "sticky" Footer section below them if any column has long content, but instead show/use a Scroll Bar for the user to scroll through content.

3. Footer section (sticky/fixed), which must ALWAYS be visible at the bottom of the window/viewport regardless of the length of the content in any of the 3 columns in the Main Content section. The footer should not be pushed down by any of the 3 columns above it, and must be really "sticky" and always visible on the viewport.

I've literally spent weeks looking for an answer, but all the solutions I've seen about the "(Three) Equal-Height Columns with Sticky Footer" do not prevent the Main Content section columns from "pushing" the Footer down if there's long content in any of the content columns.

I really hope someone can help with this. Thanks in advance!

Do you mean something like this? See fiddle: http://jsfiddle.net/NGLN/R6F5q/2/.

Tested on Win7 in IE7, IE8, IE9, Opera 11, FF 4, Chrome 12, SafariWin 5.