Post
Ask Question

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

<html>  
<head>  
    <title>Overflow</title>  
    <link href="../CSS/StyleSheet1.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
    <div id="overflow">  
    </div>  
</body>  
</html>

CSS

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

Output

div-for-ovrflow-property

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

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

CSS

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

Output

same-size-image-of-div-in-overflow

Now I will increase the size of the image to be larger than the div.

CSS

img {  
    height: 1000px;   
    width: 1000px;  
}

Output

large-size-image-of-div-in-overflow

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