Exclusions

Cascading Style Sheets (CSS) Exclusions are new in Internet Explorer 10 and Windows apps using JavaScript. With CSS Exclusions, web authors can now wrap text so that it completely surrounds elements, thereby avoiding the traditional limitations of floats. Instead of limiting elements to floating either to the left or right relative to their position in the document flow, CSS Exclusions can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.

Support for CSS Exclusions in Internet Explorer 10 and Windows apps using JavaScript enables scenarios like the one illustrated in the following image, where the app shown is laid out similarly to the way in which you might design a page in a desktop publishing application like Microsoft Word or Adobe InDesign.

Furthermore, you can combine CSS Exclusions with other new layout features of Internet Explorer 10 and Windows apps using JavaScript, such as CSS Grid, CSS Multi-column, and CSS Flexbox. CSS Exclusions are defined in the World Wide Web Consortium (W3C)'s CSS exclusions and shapes draft. The following subsections provide a brief overview of CSS Exclusions and how to implement them.

Note  Because of the preliminary status of CSS Exclusions, the properties described in this topic must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows apps using JavaScript in Windows 8. Also, be aware that the properties and syntax defined in the CSS Exclusions specification might not correspond exactly to those described in this topic. As development on the specification continues, this might change.

Exclusion terms defined

Note  Be aware that the syntax for CSS Exclusions (previously known as "positioned floats") has changed from previous pre-releases.

When learning about exclusions, it's helpful to learn the following terms, which are defined in the Definitions section of the CSS3 Exclusions specification. It is also a good idea to be familiar the terms associated with the CSS box model.

Exclusion element

The -ms-wrap-flow property makes an element an exclusion element when it has a computed value other than auto. This property specifies that the exclusion element (the exclusion) can be positioned in various ways (described in the following sections), and that inline content will wrap around the exclusion in a way similar to how it wraps around floated elements.

Exclusion area

The exclusion area is the area used for excluding inline flow content around an exclusion element. In terms of the CSS box model, the exclusion area is equivalent to the border box. At this time, the exclusion area in Internet Explorer 10 and Windows apps using JavaScript is always a rectangle.

Float area

The float area is the area used for excluding inline flow content around a float element. By default, the float area is the float element's margin box. At this time, the exclusion area in Internet Explorer 10 and Windows apps using JavaScript is always a rectangle.

Content area

The content area is the area used for layout of the inline flow content of an element. By default, the content area is equivalent to the content box.

Wrapping context

The wrapping context of an element is a collection of exclusion areas, and is used to wrap around inline flow content. An element wraps its inline flow content in the area that corresponds to the subtraction of its wrapping context from its own content area.

An element inherits its containing block's wrapping context unless it specifically resets it using the -ms-wrap-through property.

The exclusion element

The -ms-wrap-flow property makes an element an exclusion element.

When the -ms-wrap-flow property's computed value is auto, the element does not become an exclusion element unless its float property's computed value is not none. In that case, the element contributes its border box to its containing block's wrapping context and content flows around it according to the clear property. For more information about exclusion elements' impact on content flow, see the Definitions section of the CSS3 Exclusions specification.

Wrapping content around an exclusion

The -ms-wrap-through property specifies how content should wrap around an exclusion element. You can use it to control the effect of exclusions—for instance, to cause one content block to wrap around an exclusion element and another to intersect the same exclusion element.

Offsetting the inner wrap shape

The -ms-wrap-margin property specifies a margin that is used to offset the inner wrap shape from other shapes.

The example in the next section applies the -ms-wrap-margin to the floated green div.

CSS Exclusions and the CSS Grid

You can also use CSS Exclusions with the new CSS Grid functionality in Internet Explorer 10 and Windows apps using JavaScript. For instance, the following image illustrates an exclusion inside a 3×3 grid. The grid contains one div element with inline content that spans all three rows and all three columns. The exclusion has been placed in the grid cell at row 2, column 2. The content flows around the exclusion.

You can view this page. (Internet Explorer 10 is required for this page to display correctly.)

The markup for this page follows:

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Exclusions Sample</title>
  <style type="text/css">
    .container {
      font-size: small;
      width: 98%;
      height: 100%;
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr;
      -ms-grid-rows: 1fr 1fr 1fr;
    }
    .exclusion {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      background-color: lime;
      -ms-wrap-flow: both;
      padding: 10px;
      -ms-wrap-margin: 15px;
    }
    .dummy_text {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
      -ms-grid-row-span: 3;
    }
  </style>
</head>
<body>
  <div class="body">
    <h1>CSS3 Exclusions Sample</h1>
    <div class="container">
      <div class="exclusion">
        Exclusion positioned at row 2, column 2.
      </div>
      <div class="dummy_text">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</body>
</html>

API Reference

Exclusions

Samples and tutorials

CSS Exclusions sample

Internet Explorer Test Drive demos

Hands On: Positioned Floats

IEBlog posts

IE10 Platform Preview and CSS Features for Adaptive Layouts

Specification

CSS Exclusions and Shapes