Determining Where Overflow Should Go

Determining Where Overflow Should Go

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.

52. The images at the bottom of the footer are displayed on multiple lines.

To determine where overflow should go:

Type overflow:.

Type visible to expand the element box so that its contents fit. This is the default option.

Or type hidden to hide any contents that don't fit in the element box.

Or type scroll to always add scroll bars to the element so that the visitor can access the overflow if they so desire.

Or type auto, to have scroll bars appear only when necessary.

Figure. 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.

54. Now the extra images are hidden.


  • Note that IE 6 doesn't think you know what you're doing when you make a child bigger than its parent and will incorrectly extend the parent to be as big as the child. The only exception is if you set the overflow property to any value except visible (the default), in which case the parent will shrink down to its normal size and let the overflow property do its job.

  • The default value for overflow is visible. The overflow property is not inherited.

55. Now the line of images expands and contracts as the browser window expands and contracts, never spilling over into additional lines.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows