Elements are not always contained in their boxes. Sometimes the box is simply not big enough. Or perhaps you've positioned the content outside of the box, either with negative margins or absolute positioning. Regardless of the cause, you can control the area outside of the element's box with the overflow property. Figure 11.52. The images at the bottom of the footer are displayed on multiple lines.
To determine where overflow should go:
Figure 11.53. In order to display a single line of images, we set the height of the paragraph to the height of the largest images and then set overflow to hidden.
Figure 11.54. Now the extra images are hidden.
Tips
Figure 11.55. Now the line of images expands and contracts as the browser window expands and contracts, never spilling over into additional lines.
|