HTML and CSS Reference
In-Depth Information
Tip Just as you can use the max-width CSS property to set upper width constraints, you can also apply
limits the other way using the min-width property. Try amending the code and see the effect for yourself.
Resolution-Dependent Layouts
An interesting technique that you might like to employ is the resolution-dependent layout.
(Actually, that's a bit of a misnomer, as it's not the resolution of your monitor but the size of
the window in which you're currently viewing a web site that we're interested in.) With this
technique, you display one view of your page as a default (normally a smaller window size)
but for users who are viewing the site in a large window, you display an adapted design that
maximizes that space available. This layout is not the same as a liquid layout, which resizes
continually as you move the browser window's sides around; instead, once a “trigger” point is
reached the layout changes and affects the content. You can see a good example of this tech-
nique on Simon Collison's web site CollyLogic ( ), as shown in Figure 7-13.
Figure 7-13. Simon Collison's adaptable page layout on
On his site, Simon uses a combination of
CSS (for the default styling options)
JavaScript (to check for window resize events)
DOM scripting ( JavaScript that dynamically changes CSS display property values of the
affected elements)
Search WWH ::

Custom Search