View sample

Description

CSS Exclusions (previously known as "positioned floats") enable you to create webpages where text and other content can wrap around specific elements. This sample shows how to use exclusions to create complex layouts with elements absolutely positioned relative to a container.

The Exclusion placed in a normal flow example shows how an excusion can be absolutely positioned relative to a container. Inline content within that container (for example, text) will then wrap around the positioned float. The absolutely positioned image positions itself relative to the nearest non-statically positioned ancestor, a <div> element, which is set to position: relative.

Exclusion placed in multicolumn shows how an excusion image can be positioned within a multi-column container so that it aligns with the column structure of the text. As you resize the window, you’ll see how the image moves and resizes relative to the column it is in.

The Exclusion placed in grid example shows how an excusion image element can be positioned within the grid layout of a parent container.

The Exclusion placed in a table shows how an excusion can impinge on the table layout of a parent container. The image is positioned relative to the corner of the <div> and in the default view is partially outside the table. As you change the size of the window, you can see how the table and text flow around the image.

See also

Reference
CSS Exclusions

Conceptual
Internet Explorer 10 Developer Guide: CSS Exclusions

Internet Explorer Test Drive
Hands On: Positioned Floats

IEBlog
Building Rich Text-Centric Pages in IE10

Further information

The Internet Explorer Samples Gallery contains a variety of code samples that demonstrate new features available in Internet Explorer. These downloadable samples are provided as compressed ZIP files that contain the HTML, JavaScript, CSS, and image resources for the sample, along with the license agreement and sample description metadata. After you’ve downloaded and unzipped the compressed files, the sample files can be found in the following location:

(unzipped folder)\HTML,JavaScript\Website \(Sample)

This sample is provided as-is in order to indicate or demonstrate the functionality of the feature APIs for Internet Explorer 10. We appreciate your comments and questions on this sample!

For download info, visit Internet Explorer downloads.