HTML and CSS Reference
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 .
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.