CSS Overflow

In this tutorial we will learn about CSS overflow.

overflow

We use the overflow property when we want to add scroll bar or clip the content inside an element.

Overflow works only for block element having height specified.

Following are the values that we can use.

• visible - this is the default value and the content is displayed outside the element and content is not clipped.
• auto - this is to add scroll bar if the content exceeds the element height.
• hidden - this will hide the content that is overflowing the element height.
• scroll - this will add a scroll bar if content exceeds the element height.

overflow : visible

In the following example we have set the overflow property of the div (having id mycontainer) to visible. We have set the width and height of the element and written a longer text and hence the extra content will get displayed outside the element.

div#mycontainer {
	overflow : visible;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow : auto

In the following example we have set the overflow property of the div (having id mycontainer) to auto. We have set the width and height of the element and written a longer text and hence scroll bar will be added (if needed) to the element.

div#mycontainer {
	overflow : auto;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow : hidden

In the following example we have set the overflow property of the div (having id mycontainer) to hidden. We have set the width and height of the element and written a longer text and because of the hidden value the extra content will not be displayed and no scroll bar will be added.

div#mycontainer {
	overflow : hidden;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow : scroll

In the following example we have set the overflow property of the div (having id mycontainer) to scroll. We have set the width and height of the element and written a longer text and because of the scroll value scroll bar will be added both horizontally and vertically.

div#mycontainer {
	overflow : scroll;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}

overflow-x

We use the overflow-x property for horizontal scroll bar.

overflow-y

We use the overflow-y property for vertical scroll bar.

In the following example we have set the overflow-x and overflow-y property of the div (having id mycontainer).

div#mycontainer {
	overflow-x : auto;
	overflow-y : scroll;
	height : 100px;
	width : 300px;
	padding : 15px;
	background-color : #eee;
}