JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

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.

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


To determine where overflow should go:

1.
Type overflow:.

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

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


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



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→