You don??™t need to understand exactly how these
layouts work to use them. Just start your design with an XHTML
template and its associated CSS from the Stylib library, and you can
immediately begin to add the visual design of your page and its
content, without the often tedious work of creating an underlying
???chassis??? that works reliably across many different browsers. Let??™s
start by looking at some existing multi-column Web sites and their
key features.
Some Multi-Column Layouts
A basic use of columns is to organize a list of navigation links down
the left or right side of the page next to a main content area. Let??™s
take a look at an example of this. Jing is a new screen recording
technology in development from TechSmith, creators of the industry-
standard SnagIt screen capture software, and the Jing blog at
http://blog.jingproject.com/ is an excellent example of a liquid twocolumn
layout (Figure 5.1).
Visit this site and then adjust the width of your browser to see
what is meant by liquid; the main content changes its width as the
browser changes size, with the text automatically rewrapping to the
new line length as the width changes. Note, however, that the layout
reaches a minimum width where it will become no smaller??”then
the right edge of the browser window simply covers it up. We will
discover how to implement both of these features??”liquid layout
and minimum width??”later in this chapter.
Pages:
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179