HTML and CSS Reference
In-Depth Information
This is followed by three
empty
<div>
elements, all with
a
class
of
region
. You'll flow
the content into these three
empty
<div>
elements.
</div>
<div id="region1" class="region">
</div>
<div id="region2" class="region">
</div>
<div id="region3" class="region">
</div>
<img src="00092.jpg" class="video">
<img src="dust-puppy.png"
class="dp">
The magic happens in the
CSS
. First the source
<div>
is
assigned to
flow1
. Then the
declaration for elements with a
class
of
region
says to take the
content for these elements
from the flow that has just
been defined.
The remainder of the
CSS
positions the
region
elements
on the page as shown earlier.
Check out ch08/regions-
1.html file for the full code.
#source{
flow-into: flow1;
text-align:justify;
}
.region {
flow-from: flow1;
}
Making complex shapes with CSS3 Exclusions and Shapes
The
CSS3
Exclusions specification allows you to wrap content in and
around complex shapes. This spec was also born out of Adobe's pro-
posals; initially it was for shaping the regions now in the
CSS3
Regions
specification. The following layout can be achieved with a tweak to the
