Overflow Property With Auto Value in CSS

Introduction

 
In this article, I will explain the auto value of the overflow property of CSS. The overflow property of CSS is required when the contents within a div is larger than the div. There are various values for the overflow property; one of them, Auto, is defined here.
 
Step 1
 
Design a div with the help of HTML & give it properties through CSS.
 
HTML
  1. <html>  
  2. <head>  
  3.     <title>Over-flow</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#b5b6f2;  
  3. }  
  4. * {  
  5.     margin0 auto;  
  6.     padding0 auto;  
  7. }  
  8. #overflow {  
  9.     margin-top300px;  
  10.     height200px;  
  11.     width800px;  
  12.     background-color#edd3f8;  
Output
 
div-for-ovrflow-property.jpg
 
Step 2
 
Define the overflow property for the div (overflow) and give it value to the AUTO.
 
Note
 
The value auto affects the showing of the scrollbars; when the contents within the image are larger than the div and if the contents within an image are the same or smaller than the div then the scroll bar is not shown.
 
First, we will insert an image the same size as the div.
 
HTML
  1. <div id="overflow">  
  2. <img src="../IMAGES/image-for-overflow-property.jpg" />  
  3. </div> 
CSS
  1. #overflow {    
  2.  margin-top300px;    
  3.  height500px;    
  4.  width800px;    
  5.  background-color#edd3f8;    
  6.  overflow:auto;   /*Value auto is given to overflow property of div*/    
  7. }    
  8. img {    
  9.      height500px;    
  10.      width800px;    
  11. }  
Output
 
same-size-image-of-div-in-overflow.jpg
 
Now I will increase the size of the image to be larger than the div.
 
CSS
  1. img {  
  2.       height1000px;   
  3.       width1000px;  
Output
 
large-size-image-of-div-in-overflow.jpg
 
Note
 
You can see that in the second output the scroll bar is shown automatically. This is the benefit of the Auto value of the Overflow property of CSS.


Similar Articles