<!DOCTYPE HTML>
<html>
<head>
<style>
  .force-ancestor-clip {
    position: relative;
    padding-top: 1px;
    /* Needs to be above 50% for overlap to kick in. */
    padding-bottom: 55%;
    height: 0;
    visibility: hidden;
  }
  #wrapper {
    position:relative;
    width: 400px;
    margin:0 auto;
  }
  #main {
    width:875px;
    overflow:hidden;
    position:relative;
  }
  #content {
    width:400px;
  }
  .overflow-hidden {
    width:100%;
    overflow:hidden;
  }
  .float-right {
    float:right;
    width:425px;
  }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="main">
      <div id="content">
        <div class="overflow-hidden">
          <div class="float-right">
            <div id="force-clip" class="force-ancestor-clip"></div>
            <iframe src="resources/ancestor-clipping-layer-subframe.html" width="300" height="150"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>