he CSS Overflow Property

Elements in a website will expand to make room for whatever they contain. An empty division, for example, won’t show at all, but you can add 1 or 12 (whatever) paragraphs, and the division will be as big as it needs to be so everything inside is displayed.

But what happens if the dimensions of an element – let’s use a division for this demonstration – are set?

This division is set at a height and width of 100 and 200 pixel, respectively, and it has a colored background to display its dimension.

The code that creates this looks like this:

<div style="width: 200px; height: 100px; background: #ededed;">
<p>This division is set at a height and width of 100 and 200 pixel,
respectively, and it has a colored background to display its dimension.
</p></div>

In this example, overflow is no issue, there is nothing here to overflow. But what happens, if I add more content than this little box can hold?

Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.

My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.
Geesh, I had to say that three times just to clear my overflow so one can actually read what is written. But it makes the point nicely – If you stick more content into a container than it can hold, you have a problem!
This is where the overflow property comes into play. As you see, there is no overflow property applied to the above, but the division is responding to the default, which is

div {overflow: visible; }

So I need to decide what to do with this overflow. One option is to hide it by applying ‘overflow: hidden’ to the CSS. In an internal or external stylesheet, the styling for our example division would then look like this:

div {
height: 100px;
width: 200px;
background: #EDEDED;
overflow: hidden;
}

And as we look at the result of this, it’s easy to realize what kind of problem we now have:

Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.

Obviously, this creates a whole new issue: Now, part of the text has disappeared, and unless folks look at the source – and who, with the exception of us geeks, would do that??? – they will never know what else you had to say.
Good news is that in addition to ‘visible’ and ‘hidden’, which we explored above, there are two additional values to chose from: ‘scroll’ and ‘auto’. ‘Scroll’ will create a horizontal AND a vertical scrollbar to the box, whether one is needed or not.

This division is set at a height and width of 100 and 200 pixel, respectively.

That doesn’t make much sense. Why put a scrollbar if there’s nothing to scroll to? But if you think that you would know, as you design your site, if your content will fit into its element or not, you are not 100% correct. Things may or may not fit when YOU look at them, but you can never be sure exactly how all the folks visiting have their settings adjusted and how things look to them. With that in mind

div {overflow: auto;}

is the perfect solution. A srollbar will appear if one is needed:

Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.

And not, if it’s not needed:

This division is set at a height and width of 100 and 200 pixel, respectively.

Posted in: tutorial web