title: How to hide half a div on top inside of another div?
body: <p>How do I write the css to do the below effect?</p>
  
  <p>My current setting is outer div <code>position: relative</code>, inner div <code>position: absolute</code>. Didn't work. </p>
  
  <p>Please advise. Thank you very much.</p>
  
  <pre><code>    ------------
      |//////////|
      |//////////|  &lt;= hidden
  --------------------
  |   |          |   |
  |   | inner div|   |
  |   |          |   |
  |   ------------   |
  |                  |
  |                  |
  |                  |
  |                  |
  --------------------
  </code></pre>