Loving your layout a little too much ...............................................
If you have a design that you can’t stand to see move around a bit, use spe-
cific measurement units (along with the absolute position value) to fix the
size and position of your text blocks and other elements.
The designs discussed earlier, and illustrated in Figures 12-8 and 12-9, are
somewhat plastic, fluid, and unfixed. If the user lengthens the browser, for
example, that changes the meaning of top: 10%. A <div>specified at that
position must, therefore, move down the stretched browser to maintain its
ten percent distance from the top. In other words, ten percent isn’t the same
distance if the user resizes his browser windows.
However, you can refuse to allow your precious, hard-won positioning to be
disturbed. You can pin your <div>elements to their positions (relative to
each other), so even if the outer frame (the browser window) is resized, the
internal design —the visual relationships between the graphic elements on
the page — remains fixed. The way to do this is to replace all the percentage
values with specific units of measurement such as inches or pixels.
Here’s how fixed-unit code looks. This code creates the results shown in
Figure 12-10:
<html>
<head>
<style>
body {
background-image: url(background.jpg);
background-repeat: no-repeat; }
.topheadline {
font: bold 48px/.99 “Arial Black”; letter-spacing: -.06em;
padding: 10px;
left: 100px;
top: 85px;
width: 475px;
position: absolute;}
.biggestcolumn {
padding: 10px;
font-size: medium;
left: 200px;
222 Part III: Adding Artistry: Design and Composition with CSS
