{"id":17458,"date":"2013-06-21T18:01:31","date_gmt":"2013-06-21T10:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17458"},"modified":"2025-04-04T01:34:22","modified_gmt":"2025-04-03T17:34:22","slug":"css3-regions","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-regions\/","title":{"rendered":"Understanding CSS3 Regions"},"content":{"rendered":"

Print media, such as magazines and newspapers, has always had a leg up on websites due to its ability to arrange pages and paragraphs in highly flexible layouts. For instance, it can effortlessly distribute content across multiple, even complex, columns.<\/p>\n

Replicating these intricate layouts on the web has always been a challenge because of how digital content is structured.<\/p>\n

To bridge this gap and bring the flexibility of print layouts to the web, the CSS3 Regions<\/strong> module was introduced. This innovation does away with the need to confine content within multiple elements, instead allowing it to flow<\/strong> through designated areas or \u2018regions\u2019 on a web page, creating a more dynamic and versatile layout.<\/p>\n

Let\u2019s explore how this module transforms web layouts through an example.<\/p>\n

How to Enable Experimental Features<\/h2>\n

If you\u2019re eager to experiment with CSS3 Regions, keep in mind that it\u2019s still a work in progress and currently enjoys support only in Google Chrome and Internet Explorer, and that too with a prefix. Chrome users need to take an additional step to dive into these features. Simply navigate to chrome:\/\/flags\/<\/em> in your browser and switch the Enable experimental WebKit features<\/em> option to Enabled<\/strong>.<\/p>\n

\"Activating<\/figure>\n

A Simple Guide to Using CSS3 Regions<\/h2>\n

In this tutorial, we\u2019ll explore an example involving two types of content: primary and supplementary. The primary content will be distributed across Region 1, 2,<\/strong> and 4<\/strong>, whereas the supplementary content will find its place in Region 3<\/strong>. The layout below provides a visual guide to how these regions are arranged.<\/p>\n

\"Layout<\/figure>\n

HTML<\/h3>\n

Let\u2019s kick things off with the HTML structure needed for our example.<\/p>\n

One of the great things about the CSS3 Regions module is its flexibility with content arrangement. This means we can place the supplementary content separately from the main body, yet still have it appear amidst the primary content, as we\u2019ve outlined earlier.<\/p>\n

\r\n<header class=\"cf\">\r\n  <h1><span>Lorem ipsum dolor sit amet,<\/span> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.<\/h1>\r\n  <h2>labore et dolore magna aliqua<\/h2>\r\n<\/header>\r\n\r\n<article class=\"cf\">\r\n  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\r\n<\/article>\r\n\r\n<aside>\r\n  <p><img src=\"img\/stat.jpg\" width=\"500\" height=\"300\"><\/p>\r\n  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\r\n<\/aside>\r\n<\/pre>\n
Then, we need to add the regions markup where the content should flow. It does not matter whether we add the markup above or below the actual content.<\/p>\n
\r\n<div class=\"regions cf\">\r\n  <div id=\"region-1\" class=\"region cf\"><\/div>\r\n  <div id=\"region-2\" class=\"region\"><\/div>\r\n  <div id=\"region-3\" class=\"region\"><\/div>\r\n  <div id=\"region-4\" class=\"region cf\"><\/div>\r\n<\/div>\r\n<\/pre>\n
CSS<\/h3>\n
Within our CSS file, we\u2019ll define the dimensions for the regions. It\u2019s crucial to set a height<\/code> for each region because this determines when the content will transition to the next region. Without a defined height, the content won\u2019t properly distribute across the various regions.<\/p>\n
\r\n.demo-wrapper #region-1,\r\n.demo-wrapper #region-4 {\r\n  width: 100%;\r\n  height: 250px;\r\n}\r\n\r\n.demo-wrapper #region-4 {\r\n  height: 400px;\r\n}\r\n\r\n.demo-wrapper #region-2,\r\n.demo-wrapper #region-3 {\r\n  width: 50%;\r\n  height: 700px;\r\n  margin-bottom: 25px;\r\n}\r\n<\/pre>\n
To orchestrate the flow of content between these regions, we\u2019ll employ the flow-into<\/code> and flow-from<\/code> properties. These properties connect our content with the specified regions, allowing for a seamless transition of text and elements across the layout.<\/p>\n
\r\narticle {\r\n  -webkit-flow-into: article;\r\n  flow-into: article;\r\n}\r\n\r\n.demo-wrapper aside {\r\n  -webkit-flow-into: aside;\r\n  flow-into: aside;\r\n}\r\n\r\n#region-1,\r\n#region-2,\r\n#region-4 {\r\n  -webkit-flow-from: article;\r\n  flow-from: article;\r\n}\r\n\r\n#region-3 {\r\n  -webkit-flow-from: aside;\r\n  flow-from: aside;\r\n}\r\n<\/pre>\n
By integrating a few additional styling details, we achieve an appealing visual outcome in the browser, as seen in the image below.<\/p>\n
\"Final<\/figure>\n
Explore the demo and the source code for a hands-on experience with CSS3 Regions.<\/p>\n
<\/i>  View demo <\/span><\/a>\n<\/i>  Download source <\/span><\/a><\/p>\n
Further Resources<\/h2>\n