The trick when using CSS positioning is to create classes or IDs that specify
where you want your zones located. (You can throw in formatting, coloring,
and other qualities, as well, if you wish.)
Using the absolutevalue with the positioning element causes the element to
be positioned without reference to the normal flow in the page. The element
has no influence on, and is not influenced by, other elements except for its
containing block. In the examples below, the containing block is the body.
Any space that the absolutely positioned element might have used up in the
normal flow is ignored during the page layout. The element thus has no effect
on other elements at all.
Notice in the following code that I use absolute positioning, which causes each
division to be placed independently of all the other divisions. They don’t bump
into each other like train cars. Also, because percentages are used to describe
position (the top,left, and widthproperties), when the user resizes the
browser, the elements move around to maintain their relationship to the body,
as the body element takes on different shapes.
In the following code, I’ve eliminated some of the actual paragraph text to
avoid wasting space:
<html>
<head>
<style>
.topheadline {
padding: 10px;
font-size: xx-large;
font-family: arial black;
left: 12%;
top: 0%;
width: 75%;
position: absolute;}
.biggestcolumn {
top: 25%;
padding: 10px;
font-size: small;
left: 50%;
width: 40%;
text-align: justify;
background: lightgrey;
position: absolute;}
.mediumcolumn {
padding: 10px;
218 Part III: Adding Artistry: Design and Composition with CSS
