Example 1 - Flowing into 3 regions with fixed widths

In this example, we flow a chunk of text all stored within one div. This text is then put into a flow which is then retrieved from 3 region divs.

Example 2 - Flowing into 3 regions with fluid widths

In example #2 we take a similar chunk of text all contained within one div and put it into a flow. We then have 3 divs which "flow-from" the named flow we just made. The 3 region divs have their widths set at 20%.

Tip:Try resizing your browser and take notice of how the text flows within the boxes

Example 3 - Using the JavaScript API for Regions

In some browsers it is possible to call element.regionOverflow (try webkitRegionOverflow in Webkit) which can return values such as 'fit', 'empty' or 'overflow', where element is an element which is a region.

Tip: Try resizing your browser to see how the regionOverflow changes per region

Example 4 - Using text and images with regions

Here we can see how browsers treat images within regions, you may notice how images get cut off where necessary. The source content is a bunch of images of varying dimensions, text in paragraph tags and an unordered list.

Note: Image dimensions are always directly in the middle so you should be able to tell where they begin and where they end (which can look odd when they're split across multiple regions)