CSS overflow property

CSS properties you may not have heard of - 2

There may be times when your web design layout dictates that the height of all your pages should be the same or very similar. On these occasions, it can be a 'problem' if the client presents you with 'too much' text or image content so that the page height is larger than desired. What to do? Change the layout or come up with some clever DOM scripting to show page content?

In fact, the CSS overflow property can come to your rescue here. Applying a value of 'auto' to the overflow property of any element will cause the browser to display a scrollbar if there is too much content. This gives a similar effect to an iframe but created with CSS.

For example, this style rule applies overflow: auto to any element with a class named 'toomuch'.

  .toomuch {
      padding: 15px;
      margin-left: 25px;
      height: 100px;
      width: 400px;
      border: 1px solid #CCC;
      overflow: auto;
      background: #E1E1E1;
} 

Set a height and width for your element container that is appropriate for your layout. I have also given the rule some values for margin, padding, border, and background color. When applied to a paragraph, it looks like this (with my best Lorem ipsum):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce accumsan felis vel mauris. Praesent risus lorem, ullamcorper id, tincidunt eu, nonummy ac, nulla. Aenean porttitor ullamcorper ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce accumsan felis vel mauris. Praesent risus lorem, ullamcorper id, tincidunt eu, nonummy ac, nulla. Aenean porttitor ullamcorper ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce accumsan felis vel mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce accumsan felis vel mauris. Praesent risus lorem, ullamcorper id, tincidunt eu, nonummy ac, nulla.

Using overflow:auto with a div element might enable larger screen areas to be scrollable and allow additional content to be included.

One word of caution with this technique if you are concerned with how your page prints out. The visible area of an overflow:auto element may print out but the hidden area might not print. In this case, I would create a different style rule without overflow:auto in my print stylesheet.

You should also bear in mind that inserting extra scrollbars in your page may not be appealing for all users. Think carefully about whether adding extra scrollbars is necessarily a good thing in any page.

» Previously: CSS properties you may not have heard of - 1

Technorati : css, web design