| <!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> |
