In this article I have tried to explain how to use overflow property using CSS3 and HTML. Some content in an element may fall outside the element’s rendering box for a number of reasons In cases where this occurs, the ‘overflow’ property describes what to do with the content outside the elements rendering area.
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll
{
background-color:#D3D3D3;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#D3D3D3;
width:100px;
height:100px;
overflow:hidden;
}
div.hiddenX
{
background-color:#D3D3D3;
width:100px;
height:100px;
overflow-x:hidden;
}
div.hiddenY
{
background-color:#D3D3D3;
width:100px;
height:100px;
overflow-y:hidden;
}
</style>
</head>
<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the element's box.</p>
<p>overflow:scroll</p><div class="scroll">MindStick is a Microsoft ISV Gold certified software development company specializing in product development, programming and consulting services.
Currently we have three software products named MindStick Cleaner and MindStick DataConverter, MindStick SurveyManager which are available free of cost.
Thnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...!!!!!!!!!!!!!!! </div>
<p>overflow:hidden</p><div class="hidden">MindStick is a Microsoft ISV Gold certified software development company specializing in product development, programming and consulting services.
Currently we have three software products named MindStick Cleaner and MindStick DataConverter, MindStick SurveyManager which are available free of cost.
Thnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...!!!!!!!!!!!!!!! </div>
<p>overflow:hiddenX</p><div class="hiddenX">MindStick is a Microsoft ISV Gold certified software development company specializing in product development, programming and consulting services.
Currently we have three software products named MindStick Cleaner and MindStick DataConverter, MindStick SurveyManager which are available free of cost.
Thnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...!!!!!!!!!!!!!!! </div>
<p>overflow:hiddenY</p><div class="hiddenY">MindStick is a Microsoft ISV Gold certified software development company specializing in product development, programming and consulting services.
Currently we have three software products named MindStick Cleaner and MindStick DataConverter, MindStick SurveyManager which are available free of cost.
Thnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...!!!!!!!!!!!!!!! </div>
</body>
</html>
overflow:scroll
Scroll will create a scroll bar on the both axis x as well as y.
overflow:hidden
Hidden will hide the both side of axis x as well as y in element's box.
overflow-x:hidden
x:hidden will hide the x axis contents in element's box.
overflow-y:hidden
y:hidden will hide the y axis contents in element's box.
Leave Comment