Adjusting content with the Overflow property of CSS

On an HTML page, there are two types of container elements, i.e. block and Inline elements. In our article about the two types of HTML container elements, we noticed that both are essentially rectangular boxes. These container elements contain other HTML or text. The behaviour and position of the containers can be controlled by the CSS properties like display, position. Similarly, we can specify the size of every block type container element.

A block element automatically fits to the full available width. And if we don’t specify the height of the block element, then it adjusts the height to accommodate the content. However, if the size (height and width) of a block element is defined in the CSS, then neither height nor width will change to fit the larger content. The result is that the content overflows out of the container. The overflow property controls the behaviour of the container in the content overflow situation.

Overflow Property

The overflow property of CSS gives four choices to control the overflowing content – visible, hidden, scroll and auto.

The content may overflow horizontally or vertically. The child properties – overflow-x and overflow-y help you separately control the behaviour along container width and height respectively.

Overflow: visible

This is the default behaviour. If nothing is defined, then the overflow will be visible by default. So, you may set this explicitly to override some CSS definition at some other place.

overflow:visible

The overflown content will overlap with the content of the adjoining containers; the touching containers are not pushed down.

However, there is an issue with three versions of Microsoft’s Internet Explorer. IE6, IE7 and IE8 push the containers horizontally to fit the content.

Overflow: hidden

overflow:hidden

By setting the overflow property to hidden, any content going out of the container size will not be displayed. The overflown content doesn’t display in the webpage. So, there is no way to see or read such content (unless you view the page source). This setting of overflow can be used when the content overflow is expected to cause serious display issues.

Overflow: scroll

Obviously, you won’t want to hide any part of content from the user. Moreover, if the default font setting of the user is large, then there are chances of the regular content growing beyond the container space. So, under normal circumstances, hiding the overflow might not be the best approach.

overflow:scroll

Setting the overflow to scroll is a handy option. It will show the scrollbars to display the overflow content. Thus, if the content is overflowing, the scrollbars appear and the entire content is displayed within the same size of the container.

The problem here is that both the scrollbars will appear even if the content requires only one or none of them.

overflow:scroll

Moreover, there are browser issues with this value as well. When Internet Explorer puts the scrollbars inside the container, Firefox shows the scrollbars outside the container.

Overflow: auto

Till we reached this property, scroll value was the best possible solution. The auto value solves the problem by showing the scrollbars only when required.

overflow:auto

The auto value will show only the scrollbar which is required. So, this is the best possible option to use. It will show all the content within the defined space and without disturbing the layout.

Overflow: inherit?

Like most CSS properties, overflow can also take the inherit value. This means that the element takes the value that is defined for its parent element. Some of the older browsers like IE6 and IE7 do not support the inherit value for overflow.

The above value options can be applied individually to ether horizontal or vertical axis by using the overflow-x and overflow-y respectively.