Min-Max Width Three Column with Sticky Footer

Left Column

This is just some filler text to fill the empty space.

This is just some filler text to fill the empty space.

This is just some filler text to fill the empty space.

Right Column

This is just some filler text to fill the empty space.

This is just some filler text to fill the empty space.

This is just some filler text to fill the empty space.

Main Content

This demo uses no extra markup in the html for Opera and IE8 compliance.

Using a body:before float for Opera's page redraw bug.
Using a wrapper:after block with height:1%; for IE8's min-height:100%; bug.

See Example#2 for a method that uses a non-semantic dummy float in the html which will keep the CSS very simple.

Reduce viewport height to scroll content and test sticky footer.

Last line of text shows a dashed red border after #inner div's bottom-padding. It protects the text from sliding under the footer which was pulled up with a negative top margin.