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 property using CSS3 and HTML 

overflow:hidden

Hidden will hide the both side of axis x as well as y in element's box.

Overflow property using CSS3 and HTML  

overflow-x:hidden

x:hidden will hide the x axis contents in element's box.

Overflow property using CSS3 and HTML  

overflow-y:hidden

y:hidden will hide the y axis contents in element's box.

Overflow property using CSS3 and HTML

  Modified On Nov-29-2017 04:01:44 PM

Leave Comment