Lesson 6: Magazine style layout using Regions

This lesson shows how to create magazine style layouts using the CSS Regions feature. Regions allows you to define areas on a page to support threading a story through the areas. Each area is a container that receives web content, and when it overflows it jumps to the next area.

The concept with Regions is that you give some of the document content a name, by using the 'flow-into' CSS property. That establishes the source of the content and it needs to flow into something. Then what happens is you define containers that can receive that content by use of the 'flow-from' property. What happens then is that all content coming from the 'flow-into' thread pours into the areas that match the 'flow-from' property.

By using Regions, it's possible to make web pages that thread multiple stories into interleaved containers that help to enable creative visual layout.

We'll start by opening the file 'index.html' in the exercise6 folder. You'll see the main article content inside a <div> marked with the id of 'thread'.

Open the file 'regions.css' in your text editor.

Step 1: Check CSS regions in chrome://flags - restart browser if needed.

Setting up the Chrome options for CSS Region support: Type 'chrome://flags' into the omnibox as shown below:

Now search down that page for the 'Enable CSS Regions' option:

Make sure it's enabled, by clicking the 'Enable' link if it's visible. You should see the setting change to look like:

If you've changed the Region setting, the browser needs to be restarted. You should see a 'Relaunch' button at the bottom of the browser window:

If it's visible, click the 'Relaunch Now' button to restart the browser.

Step 2: Build 3 area region story flow absolutely positioned/sized.

Step 3: Place the regions containing flow content.

Resize the window to see the static sized areas on the page don't change when the window is resized.

Step 4: Use percentage sizes to make regions adapt to window size.

Step 5: Clip the content to the final region container area.

Congratulations! You've mastered the fundamentals of region layout.

Step 6: Create 'image in middle' complex layout with regions. [Optional: Advanced layout]

Step 7: Setup the story thread

Step 8: Position the image in the middle of the window

Step 9: Set up regions for the text to flow around the image with a nice layout

Step 10: Style the lead in to make it look nicer

And you're done! Way to go!