HTML and CSS Reference
In-Depth Information
the same number of screen dots. For example, the code in Example 3.6 cre-
ates a page header that keeps the alignment of the various elements when the
page is resized in a reader's browser. Figure 3.6 shows how this looks in most
browsers.
Example 3.6: Using font sizes in pixels for alignment
<!DOCTYPE html>
<html>
<head>
<title>Example 3.6</title>
<style type="text/css">
#d1 { font-size: 64px; width: 4em; float: left; }
#d2 { font-size: 32px; font-variant: small-caps; }
</style>
</head>
<body>
<div id="d1" style="font-family: Gill Sans;">
LOGO
</div>
<div id="d2">
The Company Tagline
<br/>
The Company Motto
</div>
<hr/>
<div>Company Content</div>
</body>
</html>
Figure 3.6: A logo area aligned using pixel font sizes
