height: 75%; padding-left: 6px; padding-right: 4px; padding-
top: 6px; font-size: 16pt;}
div.maintext {position: absolute; background-color:
darkkhaki; top: 0; left: 110px; height: 75%;
width: 75%;}
img.relative {position: relative; left = 35%; top = 20%}
</style>
</head>
<body>
<div class=”sidebar”> HERE is a sidebar. You can fill it with
links, text, whatever... </div>
<div class=”maintext”>
<IMG class=”relative” height=”100” width=”175”
src=”town.jpg”>
</div>
</body>
</html>This code results in the window shown in Figure 4-6.In the header, you define three rules: sidebar, maintext, and relative. The
first style provides information about how a sidebarclass of the <div>ele-
ment should look:div.sidebar {position: absolute; background-color:
cornflowerblue; top: 0; left: 0; width: 100px;Figure 4-6:
A variety
of CSS
positioning
techniques
are
illustrated in
this figure.