CSS Overflow

Google Advertisements

Prev Tutorial Next Tutorial

CSS Overflow

CSS overflow property used to handle the content when it overflows its block level container.

Why need of Overflow ?

Suppose if you do not set the height and width of any box then it goes larger as content, but if you do not set height or width of box but content can not fit inside box then it goes overflow. The CSS overflow property is used to overcome this problem.

CSS Overflow property values

ValuesDescription
visibleIt specifies that overflow is not clipped. it renders outside the element's box.this is a default value.
hiddenIt specifies that the overflow is clipped, and rest of the content will be invisible.
scrollIt specifies that the overflow is clipped, and a scroll bar is used to see the rest of the content.
autoIt specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.
initialIt is used to set the property to its initial value.
inheritIt inherits the property from its parent element.

Example: Overflow

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.scroll {  
    background-color: cyan;  
    width: 100px;  
    height: 150px;  
    overflow: scroll;  
}  
  
div.hidden {  
    background-color: pink;  
    width: 100px;  
    height: 150px;  
    overflow: hidden;  
}  
div.hidden {  
    background-color: yellow;  
    width: 100px;  
    height: 150px;  
    overflow: auto;  
}  
</style>  
</head>  
<body>  
<p>overflow:scroll</p>
<div class="scroll">
If contents goes out the container then 
scroll bar is used to see the rest of the content.
</div>
<p>overflow:hidden</p>
<div class="hidden">
It specifies that the overflow is clipped, 
and rest of the content will be invisible.
</div>
<p>overflow:auto</p>
<div class="auto">
It specifies that if overflow is clipped, 
a scroll bar is needed to see the rest of the content.
</div>

</body>  
</html>

Result

overflow:scroll

If contents goes out the container then scroll bar is used to see the rest of the content.

overflow:hidden

overflow:auto

It specifies that if overflow is clipped, a scroll bar is needed to see the rest of the content.

Prev Tutorial Next Tutorial

Google Advertisements

Buy This Ad Space @$50 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 8076671483

Pure VPN Privide Lowest Price VPN Just @ $1.65. Per Month with Non Detected IP Lowest Price Non Detected IP VPN

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

Cloud computing is the on demand availability of computer system resources, especially data storage and computing power, without direct active management by the user. Cloud Computing Tutorial

College Projects Related to Java, AWT, C Projects for College, C++ Projects for College, Android Projects. Download Java C C++ Projects

Download Projects

Adsense Advertisements


Buy This ads Space 8076671483

Buy This Ad Space @$120 per Month, Ad Size 300X600 Contact on: hitesh.xc@gmail.com or 8076671483 Try this Keyword C++ Programs