HTML and CSS Reference
In-Depth Information
Another good way to use
max-width
when creating responsive layouts is to set
an upper bound on your layout width. When your layout starts to look ghastly in
very wide viewports (and let's face it, big “cinema-screen” monitors are increas-
ingly common these days), you can control the result using something like this:
FIGURE 8.7
Setting an upper
bound on the layout width
using
max-width
.
body {
max-width: 1300px;
margin: 0 auto;
}
When the upper bound is reached, the layout will no longer grow but instead
be centered inside whatever space is available, as shown in
Figure 8.7
.
TIP:
max-width
is not supported in IE7 and earlier; therefore, I've
set
width: 100%
as a fallback in the iefixes.css file included in one
of my conditional comments (along with pixel fallbacks for all the units
set in rems, which aren't supported in IE8 and earlier). But you must be
careful with this:
width
is way less flexible than
max-width
. If the container
is smaller than the image, the image will maintain its set width and over-
flow the container.
