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

Summary details go here
</div>
</div>
</body>
</html>
Of course, if we stopped here we'd have a technically valid but rather ugly and hard-to-use document. The final
step is to reproduce the original layout with CSS instead of frames. The techniques are much the same as used
in earlier sections for eliminating table layouts. The details will vary depending on the frame-based layouts
you're replacing. Simple sidebar and navigation layouts can be handled using the stylesheets presented earlier.
For the Javadoc layout demonstrated here, Listing 5.12 shows a CSS stylesheet that does the job. Figure 5.4
shows the finished document.
Listing 5.12. A CSS Stylesheet for Javadoc Layout
#outer { position: relative; }
#leftFrame {
position: fixed;
height: 100%;
width: 20%;
top: 0;
}
#classFrame {
position: absolute;
left: 21%;
width: 77%;
}
#packageListFrame{
position: static;
height: 200px;
overflow: scroll; }
#packageFrame {
position: static;
height: 70%;
overflow: scroll;
}
Figure 5.4. Javadoc CSS layout
[View full size image]