In this second part of a two-part article, we examine more positioning properties available in the CSS2 specifications, and use what we've learned to build a simple drop-down menu without employing any JavaScript.
Introduction to CSS Positioning Properties Part 2 - The "overflow" property (Page 5 of 6 )
This property defines how the element treats content that exceeds the specified widths or heights applied to it. The default behavior for all elements is to respect the width property and let the overflowed content flow down in the element, thus varying the height according to the total length of the content. The following values may be set for this property:
overflow: visible;
The selected block element will expand accordingly, in order to display the full width and height of contents. Padding and margin values applied to the element are preserved.
overflow: hidden;
The selected block element is forced to preserve its width and height properties, potentially clipping the overflowed content by the size of the element. Borders and padding values are preserved, but margin values might be removed along the edges that clip the content. No scrollbars are displayed with this value.
overflow: scroll;
The selected block element will show a set of scrollbars inside the element, regardless of whether or not they're needed. The scrollbars are activated only if the size if the content requires scrolling in any direction.
overflow: auto;
The selected block element will generate scrollbars only if the content exceeds the size of the element.
Here are several examples to demonstrate the use of this property:
<div id="element1">Element content goes here............and more content is placed here.</div>
In this case, we've assigned the value "auto" to the "overflow" property. Since the content included into the element exceeds the width of the container, it will display a set of scrollbars, as illustrated below:
Now, let's see what happens when we modify the content's length in a way that doesn't exceed the width of the container element. The CSS code is the same:
<div id="element1">Element content goes here............and more content is placed here.</div>
The visual output is showed below:
This time, the container element expands its width accordingly, in order to display the full width and height of contents, as perceived in the image.
Finally, let's assign the values of "hidden" and "scroll" to the property and see how the visual output is rendered.
This is the visual output with a value of "hidden" assigned to the property. We can see that the content is partially clipped from the container element. Similarly, here's the output when a value of "scroll" is specified:
Now, the container element shows a set of scrollbars around, for scrolling the content either horizontally or vertically. In this particular case, the content will scroll horizontally. Vertical scrollbars are disabled.
So far, we've illustrated with examples the different behaviors for each value assigned to the "overflow" property. It's valid to mention that NS 4 does not support this property, so if you're still getting visitors using this old browser, its implementation should be avoided.
Finally, we're going to demonstrate a simple but useful example to create drop-down menus using the "overflow" and "display" property, as a follow-up for this guide. Let's put our coder abilities into action.
Style Sheets 
HTML5 Boilerplate Introduction
