CSS

All Values of Overflow Property in CSS

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 are larger than the size of that element. There are various values available for the overflow property, these values are:
  1. Visible  
  2. Hidden
  3. Auto
  4. Scroll
  5. Inherit 
The following shows the design of a div using HTML & provides its properties through CSS.
 
Step 1
 
 HTML
  1. <html>  
  2. <head>  
  3.      <title>Over-flow-all-values</title>  
  4.      <link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />  
  5. </head>  
  6. <body>  
  7.      <div id="overflow">  
  8.      </div>  
  9. </body>  
  10. </html> 
CSS
  1. body {  
  2.     background-color:#98979d;  
  3. }  
  4. * {  
  5.      margin: 0 auto;  
  6.      padding: 0 auto;  
  7. }  
  8. #overflow {  
  9.      margin-top: 300px;  
  10.      height: 500px;  
  11.      width: 800px;  
  12.      background-color: #edd3f8;  
  13. } 
Output
 
div-for-ovrflow-property.png
 
Step 2
 
 Define the overflow property for the div (overflow) and give it the value Visible. Insert an image larger than the div. See:
 
HTML
  1. <div id="overflow">  
  2.         <img src="../images/image-for-all-value-overflow-property.jpg" />  
  3. </div> 
CSS
  1. #overflow {  
  2.     margin-top: 300px;  
  3.     height: 500px;  
  4.     width: 800px;  
  5.     background-color: #edd3f8;  
  6.     overflow: visible;   /*Value visible is given to overflow property of div*/  
  7. }  
  8. img {  
  9.     height: 800px;  
  10.     width: 800px;  
  11. } 
Output
 
image-for-visible-value-overflow-property.png
 
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
  1. overflow:hidden;   /*Value hidden  is given to overflow property of div*/ 
Output
 
image-for-hidden-value-overflow-property.png
 
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
  1. overflow: scroll;   /*Value scroll is given to overflow property of div*/ 
Output
 
image-for-value-scroll-for-overflow-property.jpg
 
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 larger 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
  1. overflow:inherit;   /*Value inherit  is given to overflow property of div*/ 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found