css-exclusions-1/examples/example-4.html

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
    body {
        width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    #d1 {
        position:relative;
        height: auto;
        color: #46A4E9;
        border: 1px solid gray;
    }

    #e1 {
        -webkit-wrap-flow: both;
        position: absolute; 
        left: 50%; 
        top: 50%; 
        width: 40%; 
        height: 40%; 
        border: 1px solid red;
        margin-left: -20%;
        margin-top: -20%;
    }

    #d2 {
        position: static;
        width: 100%;
        height: auto;
        color: #808080;
    }

    #e2 {
        -webkit-wrap-flow: both;
        position: absolute; 
        right: 5ex; 
        top: 1em; 
        width: 12ex;
        height: 10em; 
        border: 1px solid lime;
    }
    </style>
</head>
<body>
  
  <div id="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum eros, euismod a elementum in, consectetur in magna. Pellentesque lacinia, arcu a cursus placerat, dolor lorem iaculis sem, sed suscipit libero quam non magna. Suspendisse potenti. Suspendisse quam quam, adipiscing et varius sit amet, semper non sem. Pellentesque vel justo tellus, at vehicula nulla. In sed urna massa, sit amet scelerisque diam. Mauris vestibulum sodales rutrum. Nulla in dignissim tortor.
      <p id="e1"></p>
  </div>
  <div id="d2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum eros, euismod a elementum in, consectetur in magna. Pellentesque lacinia, arcu a cursus placerat, dolor lorem iaculis sem, sed suscipit libero quam non magna. Suspendisse potenti. Suspendisse quam quam, adipiscing et varius sit amet, semper non sem. Pellentesque vel justo tellus, at vehicula nulla. In sed urna massa, sit amet scelerisque diam. Mauris vestibulum sodales rutrum. Nulla in dignissim tortor.
      <p id="e2"></p>
  </div>
</body>


</html>