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>Over-flow</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.jpg]()
Step 2
Define the overflow property for the div (overflow) and give it value the AUTO.
Note
The value auto affects the showing of the scrollbars; when the contents within the image is larger than the div and if the contents within an image is 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.jpg]()
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.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.