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 either slides below the middle one (if I use float to position the columns) or it overlaps it (if I use absolute positioning). I want the right column to "bump" into the middle one once that one's min width is reached and stop moving, at this point the page should start showing a horizontal scroll bar.

Following is my attempt with absolute positioning:

h2 {
  margin-top: 0;
}

#leftside {
  position: absolute;
  left: 0;
  width: 200px;
}

#rightside {
  position: absolute;
  right: 0;
  width: 150px;
}

#content {
  min-width: 200px;
  margin: 0 150px 0 200px;
}

<div id="leftside">
  <ul>
    <li><a href="">Left Menu 1</a></li>
    <li><a href="">Left Menu 2</a></li>
  </ul>
</div>
<div id="rightside">
  <ul>
    <li><a href="">Right Item 1</a></li>
    <li><a href="">Right Item 2</a></li>
  </ul>
</div>
<div id="content">
  <h2>Content Title</h2>
  <p>Some paragraph.</p>
  <h2>Another title</h2>
  <p>Some other paragraph with total nonsense. Just plain old text stuffer that serves no purpose other than occupying some browser real-estate</p>
</div>

Answer 1

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.

Answer 2

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.