CSS Exclusions

This code demonstrates how a exclusion can impinge on the table layout of a parent container. Try adjusting the width of the parent window to see how the position and size of the figure adjusts to the size of the parent container.

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;
}
#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: 100px;
     left: 100px;
     height: 10em;
}