title: how to make a floating div disappear for smaller screens?
body: <p>This is a pure html/css Question, here it goes.. 
  I have a floating div to the right of my page layout, I need it to disappear if my screen size is too small (or if resize the browser window to a smaller setting). Let's say it's something as simple as this:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Layout test&lt;/title&gt;
      &lt;link href="simple.css" rel="stylesheet" type="text/css" media="screen" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Welcome&lt;/h1&gt;
      &lt;div id="right-div"&gt;
        &lt;ul&gt;
          &lt;li&gt;Option 1&lt;/li&gt;
          &lt;li&gt;Option 2&lt;/li&gt;
          &lt;li&gt;Option 3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="main"&gt;
        &lt;p&gt;Some content goes here!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>
  
  <p>let's say it has this simple CSS too:</p>
  
  <pre><code>#main {
    border:       1px solid black;
    width:        800px;
    height:       500px;
    padding:      7px;
    margin-left:  auto;
    margin-right: auto;
    position:     relative;
    z-index:      10;
  }
  
  #right-div {
    border:   1px solid black;
    float:    right;
    width:    200px;
    position: relative;
    z-index:  9;
  }
  </code></pre>
  
  <p>As of now, if I reduce window size, the div with <strong>id</strong> of right-div starts to overlap with the "main" <strong>div</strong>. I need to know how to make it disappear or <em>hide</em> if the screen size is small (or getting smaller).</p>
  
  <p>How can I accomplish this? 
  Thank you all in advance for your help, </p>
  
  <p>J.</p>