Home arrow Style Sheets arrow Page 5 - Introduction to CSS Positioning Properties Part 2
STYLE SHEETS

Introduction to CSS Positioning Properties Part 2


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
February 28, 2005
TABLE OF CONTENTS:
  1. · Introduction to CSS Positioning Properties Part 2
  2. · The "clear" property
  3. · The "z-index" property
  4. · The "visibility" property
  5. · The "overflow" property
  6. · A simple drop-down menu using the "overflow" and "display" properties

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials