All Values of Overflow Property in CSS

Preeti Zutshi
Jan 14, 2013
6k
0
2
Article

Introduction

In this article I will explain all the values for the overflow property of CSS for an element. The overflow property of an element is required when the contents within an element is larger than the size of that element. There are various values available for the overflow property, these values are:

Visible
Hidden
Auto
Scroll
Inherit

The following shows the design a div using HTML & provides it's properties through CSS.

Step 1

HTML

<html>
<head>
   <title>Over-flow-all-values</title>
   <link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div id="overflow">
   </div>
</body>
</html>

CSS

body {
  background-color:#98979d;
}
* {
   margin: 0 auto;
   padding: 0 auto;
}
#overflow {
   margin-top: 300px;
   height: 500px;
   width: 800px;
   background-color: #edd3f8;
}

Output

Step 2

Define the overflow property for the div (overflow) and give it the value Visible. Insert an image larger the div. See:

HTML

<div id="overflow">
  <img src="../images/image-for-all-value-overflow-property.jpg" />
</div>

CSS

#overflow {
  margin-top: 300px;
  height: 500px;
  width: 800px;
  background-color: #edd3f8;
  overflow:visible;   /*Value visible is given to overflow property of div*/
}
img {
  height: 800px;
  width: 800px;
}

Output

Note
You will see that if we give the visible value for the overflow property then contents of that element will overlap that element.

Step 3

Provide the value hidden for the overflow property.

CSS

overflow:hidden;   /*Value hidden is given to overflow property of div*/

Output

Note
You will see that if we provide the hidden value for the overflow property then the contents of that element will be hidden and we cannot see them.

Step 4

Provide the value auto for the overflow property. I assume you are familiar with the auto value of the overflow property. For more detail visit: http://tempuri.org/tempuri.html

Step 5

Provide the value scroll for the overflow property.

CSS

overflow: scroll; /*Value scroll is given to overflow property of div*/

Output

Note
You will see that if we provide the scroll value for the overflow property then a scroll bar will be shown automatically. The Scroll bar in this is not dependent on the contents of the element, the contents could be larer or smaller than the size of the element but the scroll bar will still be shown.

Step 6

Provide the value inherit for the overflow property. If we assign the inherit value for the overflow property for an element then the contents of that element will have the value provided for the parent element of that element.

CSS

overflow:inherit; /*Value inherit is given to overflow property of div*/