top:40%;
left: 5%;
width: 35%;
background: lightsalmon;
position: absolute;}.smallcolumn {
padding: 10px;
left: 45%;
width: 25%;
top: 65%;
background: lightsalmon;
position: absolute;}</style>
</head><body><div class=”topheadline”>
THIS IS THE MAIN HEADLINE
</div><div class=”biggestcolumn”>
The biggest column: Here you are specifying that you want the
first paragraph displayed in a special green
version of the highlight class, but ...
</div><div class=”mediumcolumn”>
The medium column: Here you are specifying that you want the
first paragraph displayed in a special green
version of the highlight class, but ...
</div><div class=”smallcolumn”>
The small column: Here you are specifying that you want the
first paragraph displayed in a special green
version of the highlight class, but ...
</div></body>
</html>As you can see, a set of classes is defined in the style at the top of the code.
Each class describes a position on the body of the page. In the body section
of the code are a set of divisions, each referencing one of the classes. The
result is shown in Figure 12-8: