HTML5 Zone is brought to you in partnership with:

My name is Sagar Ganatra and I'm from Bangalore, India. I'm currently employed with Adobe India and I work there as a ColdFusion Engineer. At Adobe, I have worked on various features of ColdFusion and ColdFusion Builder. I'm very much passionate of web technologies and have a very good understanding of jQuery, Flex, HTML5, Java and of course ColdFusion. Sagar H is a DZone MVB and is not an employee of DZone and has posted 43 posts at DZone. You can read more from them at their website. View Full User Profile

How CSS3 Regions Give You Content Flow and Serious Page Layout Powers

04.03.2012
| 5090 views |
  • submit to reddit

Today I was reading about CSS3 and I stumbled upon CSS3 regions. I was completely flabbergasted with what I saw and learnt today. Imagine that you’re trying to build a website for a magazine containing multiple columns (say 3). It would be arduous to fix the textual content on a particular column and then move the rest of the text to other columns. Now with Content Flow mechanism, the extra content can be moved to other columns in the layout with ease. There are just a couple of properties that you need to define in the styling sheet and you’re done. But this is not it. When you resize the browser window, the content automatically flows to other regions depending on the browser size.

Consider this web page layout containing 3 columns. For the purpose of this example, I have copied the text from my blog’s ‘About Me’ page and have increased the font to describe the flow.

content_flow_css3_regions

As you can see, the text is split across 3 columns in the page. When you try to reduce size of the browser window, the text automatically moves to the next region and when you increase the size the text flows back to the previous region.

There are couple of properties that you need to set for this content flow mechanism to work. Here’s the code:

body {
 height: 100%;
 width: 100%;
 margin: 20px;
 overflow: hidden;
 line-height: 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px; 
} 

/* source data available under a div with id - 'column_source' 
-webkit-flow-into: main-region instructs the browser to move the 
content to another region. 'main-region' is used as an identifier. */ 

#column_source {
 -webkit-flow-into: main-region;
 text-align:justify; 
} 

/* -webkit-flow-from: main-region instructs the browser to get the content from 'main-region'. */ 

.region {
 -webkit-flow-from: main-region;
 border: solid 1px;
 padding: 10px;
 margin-right: 30px; 
} 

#wrapper_regions {
 position: relative;
 padding: 25px; 
} 

#region1 {
 width: 20%;
 height: 50%;
 float:left; 
} 

#region2 {
 width: 20%;
 height: 20%;
 float: left; 

} 

#region3 {
 width: 30%;
 height: 70% 
}

As you can see from the above code, the source div has a property '-webkit-flow-into: main-region' and the region class has the property '-webkit-flow-from: main-region'. Here 'main-region' is used as an identifier to move the content from the source div to the various regions. Here's the HTML code: 

<body>
 Resize the browser window.
 <!-- source region -->
 <div id="column_source"><p>My name is Sagar Ganatra and I'm from Bangalore, India. I'm currently employed with Adobe India and I work there as a ColdFusion Engineer. At Adobe, I have worked on various features of ColdFusion and ColdFusion Builder. I'm very much passionate of web technologies and have a very good understanding of jQuery, Flex, HTML5, Java and of course ColdFusion. Apart from work, whenever I find time I indulge myself in reading books, cooking, swimming and blogging. This blog is dedicated to my views and ideas on the technologies that I work on, I also blog about my views on everything else that crosses my mind and on those light moments at sagarg.posterous.com</p>
 </div>
 <!-- regions where the above content would be displayed -->
 <div id="wrapper_regions">
   <div id="region1" class="region"></div>
   <div id="region2" class="region"></div>
   <div id="region3" class="region"></div>
 </div>
</body>

In the above code, three regions have been defined that would contain the data from the source div. Once '#region1' is filled up with the text, the remaining text content will be passed to the next region '#region2'. And whenever an attempt is made to resize the window, the source data would fill up the regions in the order that they are defined in the page.


As you might have figured it out, this works only on webkit browsers and fails on other.

Click on the demo button to see how this works. Resize the window and observe the behavior.

 

Published at DZone with permission of Sagar H Ganatra, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)