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:
<style type="text/css">
#element1 {
font: bold 12px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
position: absolute;
top: 20px;
left: 10px;
width: 30px;
background: #fc0;
padding: 10px;
overflow: auto;
}
</style>
The HTML markup is the following:
<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:
<style type="text/css">
#element1 {
font: bold 12px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
position: absolute;
top: 20px;
left: 10px;
width: 30px;
background: #fc0;
padding: 10px;
overflow: auto;
}
</style>
But the content within the markup has been significantly reduced to this:
<div id="element1">Element 1 content</div>
The visual output would be as follows:
Clearly, we can appreciate that the set of scrollbars is not present, since the content now fits seamlessly into the container element.
Let's implement the same above code, but this time specifying a value of "visible":
<style type="text/css">
#element1 {
font: bold 12px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
position: absolute;
top: 20px;
left: 10px;
width: 30px;
background: #fc0;
padding: 10px;
overflow: visible;
}
</style>
With the same HTML markup:
<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.
Next: A simple drop-down menu using the "overflow" and "display" properties >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 9 
