Positioned Floats

This demo allows users to drag a positioned float around the screen to see how inline content reflows around it. This capability is new to the web platform, because other layout constructs like CSS2.1 floats are constrained to the left or right of an element (and inline content will only flow to one side), and absolutely positioned elements do not impinge on inline content. Neither construct has an impact on inline content contained within another element. Positioned floats share none of these limitations.

Positioned Floats allow designers to wrap content around other elements on the page, enabling layouts that are unachievable with existing CSS constructs. This new functionality has been recently proposed to the CSS Working Group, and is one of a number of new capabilities Microsoft is introducing into the web platform with Internet Explorer 10 Platform Preview 2. Our proposal describing Positioned Floats is available at http://www.interoperabilitybridges.com/css3-floats/.

As of the Windows 8 Consumer Preview we have updated our implementation to match the syntax proposed in the latest W3C specification (now called CSS3 floats).



Click to drag it around the page.


On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template. On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly. To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
Positioned Floats in action
This demo demonstrates the types of rich new layouts that are available to developers using Positioned Floats. Drag the blue element around the page to see how text flows around the element. With layout constructs available in CSS 2.1 it is very difficult to create layouts where text flows around an image or other content. These types of layouts are very common in the print world, but have been virtually impossible to create on the web platform. By selecting the radio buttons below you can also see how Positioned Floats can be combined with CSS3 Multi-Column and other constructs like CSS3 Grid.
Advanced options