title: How can I prevent HTML elements from overlapping or sliding under one another?
body: <p>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. </p>
  
  <p>Following is my attempt with absolute positioning:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="leftside"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Left Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Left Menu 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="rightside"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Right Item 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Right Item 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
    &lt;h2&gt;Content Title&lt;/h2&gt;
    &lt;p&gt;Some paragraph.&lt;/p&gt;
    &lt;h2&gt;Another title&lt;/h2&gt;
    &lt;p&gt;Some other paragraph with total nonsense. Just plain old text stuffer that serves no purpose other than occupying some browser real-estate&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>