CSS Exclusions

This code demonstrates how a exclusion can be absolutely positioned relative to a container, and how inline content within that container (for instance, text) will then wrap around the exclusion. Note that the absolutely positioned element positions itself relative to its nearest non-statically positioned ancestor, so the parent container in this case must be set to position: relative, rather than the default position: static.

Code

#container
{
    /*The parent container must be set to 'postion:relative' because 'position:absolute'
    elements, such as the figure, only position themselves relative to the nearest
    non-static ancestor element*/
    position: relative;
    
    width: 100%;
    height: 100%;
    border: 1px solid black;
    
    /*This code activates full justification and hyphenation for text, which is
    recommended for text intersecting with exclusions*/
    -ms-hyphens: auto;
    text-align: justify;
}
#figure
{
    /*This code specifies the element as an exclusion and allows content to
    flow on all sides if it. */
    -ms-wrap-flow: both;

    position: absolute;
    top: 3em;
    left: 15em;
    margin: 5px;
    height: 10em;
}