I'm currently diving into the realm of HTML5 and CSS3. Lately, I've been exploring CSS regions, but when I attempted to apply it to my HTML, the text didn't flow correctly into the designated regions.
Below is a snippet of my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Regions Example</title>
<style type="text/css">
body, html{height: 100% width: 100%;}
body{
font-family: serif;
color: black;
font-size: large;
}
#source{
-webkit-flow-into: main;
}
.region{
-webkit-flow-from: main;
margin: 0 25px 0 0;
background: #EEE8AA;
padding: 20px;
}
#region1{
width: 20%;
height: 50%;
float: left;
}
#region2{
width: 20%;
height: 50%;
float: left;
}
#workarea{
position: relative;
padding: 25px;
}
</style>
</head>
<body>
<div id="source">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar
ultricies, purus lectus malesuada libero, sit amet commodo magna
eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a
tellus. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Proin pharetra nonummy pede.</p>
</div>
<div id="workarea">
<div id="region1" class="region"></div>
<div id="region2" class="region"></div>
</div>
</body>
</html>
The instructional book advised enabling CSS regions in the browser by going to the following path: browser shortcut > Properties > add "--enable-css-regions" to the Target field. However, despite doing so, the issue persists.
If you have any insights or solutions to this problem, kindly share them with me!
PS: I've tested this on both IE11 and Chrome version 14.