Overflow Property: Web Design Tutorial: CSS Part 25

overflow property

The overflow property

In this lesson, we will be working with the overflow property. The overflow property will only work on a BLOCK element with a specified height. The purpose of this declaration is to give the web designer the ability to specify how the element will display when the content is larger than the specified height and/or width. There are a few properties and values that can be used. See the lists below

PROPERTIES

  1. overflow:
      Specifies what to do with the overflowed content on all sides.
  2. overflow-x:
      Specifies what to do with the left and right edges of the content. (Horizontal).
  3. overflow-y:
        Specifies what to do with the top and bottom edges of the content. (Vertical).
      Both the overflow-x and overflow-y can be used in the same CSS rule to specify what to do with the overflowed content individually.

VALUES

  1. visible;
      Specifies that the overflow is visible and will render and display outside of the element’s box.
  2. hidden;
      Specifies that the overflow is hidden. Overflowed content will be clipped and unseen.
  3. scroll;
      Overflow content is clipped. Scrollbars are added both vertically and horizontally; even if they are not needed.
  4. auto;
      Auto is similar to scroll, but will only add scrollbars if needed.

The lists above describe how the overflow properties and values work. Now that you know the properties and values that are available for overflow, let’s start using them in some examples. See example 1 below.

index.html Example 1

overflow html

my-styles.css Example 1

overflow css

Displayed Page Example 1

overflow: hidden

In the index.html document, we have two DIVS set up with CLASSES. The class names of “overflow-hidden” and “overflow-visible” refer to the property and value that will be used for that specific div. I have added a few lines of random text inside of each div for this exercise. It doesn’t matter what you put in there as long as you have a few sentences.

In the my-styles.css stylesheet, we set up two CSS class rules with a width, height, and background-color. Remember, in order for the overflow property to work, we need to specify a height, and it has to be a block element. There is also a margin-bottom declaration. This is included solely for the purpose of adding some separation between our div examples. We have the relevant overflow declaration in both CSS rules. They are highlighted in the my-styles.css Example 1 image. Looking at the Displayed Page Example 1 now, we see our two divs. First, the overflow-hidden and then the overflow-visible. The div with the overflow: hidden; declaration, is clipped where the specified height ends. All of the other text cannot be seen. And the other div with the overflow: visible; declaration does not clip the extra text. Instead, it continues to run outside of the element’s box. The background-color makes this easy to see. If we added another div after this one, the overflowed text that isn’t being clipped would overlap it. So keep that in mind when using the overflow: visible; declaration. For the next set of examples, see the images below.

index.html Example 2

overflow: auto

my-styles.css Example 2

overflow: auto css

Displayed Page Example 2

overflow auto

We create two more divs with class names of “overflow-scroll” and “overflow-auto“. The divs are put before the div with a class of overflow-visible. For the rest of this lesson, that is where we will keep it because the visible overflowed text would run right on top of our new div example. The CSS rules are set up in the exact same way with the appropriate overflow values of scroll and auto. In the Displayed Page Example 2, you can see how similar the scroll and auto values work. Be aware that because HTML documents are read from top to bottom, our two new divs are displayed before the overflow: visible; div. The div with overflow: scroll; clips the overflowed text and adds two scrollbars both vertically and horizontally. When we use scroll as the value for overflow, it will ALWAYS add two scrollbars. The div with the overflow: auto; declaration, clips the overflowed text, but will only add scrollbars if it is necessary. This could be 2, 1, or even no scrollbars. The final example is below.

index.html Example 3

overflow property

my-styles.css Example 3

overflow: scroll css

Displayed Page Example 3

overflow-x

In our final example, we add one more div with a class name of “overflow-xy“. I have doubled the amount of text for this div to give a better example. The only differences in the .overflow-xy CSS rule from the other rules are the overflow declarations. Instead of just one, we have two in order to specify what we want to happen to the top/bottom and left/right. The new declarations that we use in this example are, “overflow-x: scroll;” and “overflow-y: hidden;“. Refer to the fourth div from the top in the Diplayed Page Example 3 image. The result we end up with in our case is clipped overflow for both the x and y axis (top/bottom, left/right) and a horizontal scrollbar that came from the overflow-x: scroll; declaration.

That’s it for the overflow properties and values. It’s important to know that you will get slightly different results depending on the type of block element used, and what browser the web page is being viewed in. Some browsers will add the scrollbars to the inside of the element box instead of outside like in our examples. For a little side project, change the width value in the “.overflow-xy” CSS rule to 50px. And add another div after the overflow-visible div. You can also take away the margin-bottom declarations to see what happens to the overflowed text from a div with an overflow: visible; declaration.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>The Overflow Property</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>
<div class="overflow-hidden">This text is here to simulate a bunch of text in a div
element. You can also use lorem ipsum as place holder text. Just search for
lorem ipsum in a search engine and copy/paste it into your code.</div>
<div class="overflow-scroll">This text is here to simulate a bunch of text in a div
element. You can also use lorem ipsum as place holder text. Just search for
lorem ipsum in a search engine and copy/paste it into your code.</div>
<div class="overflow-auto">This text is here to simulate a bunch of text in a div
element. You can also use lorem ipsum as place holder text. Just search for
lorem ipsum in a search engine and copy/paste it into your code.</div>
<div class="overflow-xy">This text is here to simulate a bunch of text in a div
element. You can also use lorem ipsum as place holder text. Just search for
lorem ipsum in a search engine and copy/paste it into your code.
This text is here to simulate a bunch of text in a div
element. You can also use lorem ipsum as place holder text. Just search for
lorem ipsum in a search engine and copy/paste it into your code.</div>
<div class="overflow-visible">This text is here to simulate a bunch of text in a div
element. You can also use lorem ipsum as place holder text. Just search for
lorem ipsum in a search engine and copy/paste it into your code.</div>
</body>
</html>

my-styles.css Source Code


.overflow-visible{
width: 200px;
height: 80px;
background-color: gray;
overflow: visible;
}
.overflow-hidden{
width: 200px;
height: 80px;
background-color: gray;
margin-bottom: 20px;
overflow: hidden;
}
.overflow-scroll{
width: 200px;
height: 80px;
background-color: gray;
margin-bottom: 20px;
overflow: scroll;
}
.overflow-auto{
width: 200px;
height: 80px;
background-color: gray;
margin-bottom: 20px;
overflow: auto;
}
.overflow-xy{
width: 200px;
height: 80px;
background-color: gray;
margin-bottom: 20px;
overflow-x: scroll;
overflow-y: hidden;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: