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.

Answer 2

You should be able to do this using a wrapper div along with min-width and eventually overflow, such as: http://jsfiddle.net/5zsyj/

Try re-sizing the window, if the column is < 300px, it will show scroll-bars instead of just resizing the elements themselves, or floating above eachother.