Layout - Refactoring HTML: Improving the Design of Existing Web Applications - page 185

</div>
</body>
</html>
Although the Authors header is at the end of the document, we can still move it to the visual top of the page by
absolutely positioning it with this rule:
#Header {
position: absolute;
top: 1ex;
margin:10px 10px 2ex 10px;
padding-right: 17em;
font-size: small;
}
Note that we had to set its right margin to keep it from overlapping the right sidebar containing the titles. We
also need to push the main content down the page by setting Content's top margin like so:
#Content {
top: 24ex;
}
You'll have to experiment to find the right size for the top of the main content. It will depend on how much text
you put in the header, as well as how big the header font is. If you leave some extra whitespace, you can
usually find a value that works for a wide range of user font sizes and browser widths. If the font gets really
huge, there may be some overlap. However, I've been using layouts such as this for several years now, and so
far no one has written me to complain that at 64 points or larger, the header starts to overlap the rest of the
page.
The footer is actually quite easy to handle. Because that comes after the main content in both the logical and
presentational flow of the document, it doesn't require nearly as much trickery as the header does. In fact, all
you really have to do is place the footer div inside the main content div , rather than outside. That moves it to
the bottom, and no extra CSS positioning is needed.