Introduction

In this article I will explain auto value for overflow property of CSS. Overflow property of CSS require when the contents with in a div are more than the size of the div. There are different values found for overflow property, one of them value Auto is define at 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 overflow property for div (overflow) and give it value AUTO.

Note

Value auto will work like a scroll when contents with in the image will be more than size of div and if contents with in image are same or less then size of Div, the div will be as it is any scroll bar will not be there.

First we will insert an image same size of 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 size of image than the size of div.

CSS

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

Output

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

Note

You can notice that in second output scroll bar working automatically. This is the benefit of Auto value of Overflow property of CSS.