How can I prevent HTML elements from overlapping or sliding under one another?

Question

I am trying to layout a page in three columns, I want the middle column to resize with the page but the problem is that if the page is made very narrow, the left column eith

Answer 1

A solution would be to add this to the CSS:

html {
min-width: 550px;
position: relative;
}

demo: http://jsfiddle.net/4PH4B/

The basic idea is that when the page reaches the sum of all the column's widths it should no longer shrink, instead just show the scroll bar. Also the position: relative; declaration is there to align the third column to the right side of the html content, not just the window.