HTML and CSS Reference
In-Depth Information
FIGURE 8.5
Media ele-
ments overflowing their
containers = ugly!
FIGURE 8.4
The flexible layout with the content filled in. Love that retro feel!
Now open the file media-blitz-2-with-content.html, which looks like
Figure 8.4
.
This file is the same as the previous version but with some content filled in for
you to work with.
RESPONSIVE MEDIA LAYOUTS
The layout I've created so far looks perfectly reasonable. As you increase and
decrease the width slightly, it breathes. The sizes of the different containers change,
and their relative proportions change, meaning that you can still see all of the layout.
Te x t w i l l re fl o w fl aw l e s s l y i in t h e s e s i t u at i o in s , b u t y o u c a in s o o in r u in i in t o p ro b -
lems with images and video. If an image or video overflows its bounds, the result
will get ugly, as shown in
Figure 8.5
.
