CodePen

HTML

            
              <!-- Structure -->
<div class="region red">
</div>
<div class="region blue">
</div>

<!-- Content -->
<div class="main-content">
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Repellendus voluptates fugit molestiae sint?</p>
  <p>Magni consequatur officia est! Alias.</p>
  <p>Unde soluta consectetur explicabo iste!</p>
  <p>Praesentium architecto asperiores repudiandae vero.</p>
</div>


            
          
!
via HTML Inspector

CSS

            
              .main-content{
  flow-into:content; /* flow everything into 
                        the named-region content */
}

.region{
  flow-from:content; /* let the content from the 
                        named-region content into 
                        divs with this class */
  height:90px;
}
.red{
  background:red;
}
.blue{
  background:blue;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................