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
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
Now I will increase the size of the image to be larger than the div.
CSS
img {
height: 1000px;
width: 1000px;
}
Output
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.