Home > DeveloperSection > Articles > Overflow property using CSS3 and HTML

Overflow property using CSS3 and HTML


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 2649  View(s)
Rate this:

Overflow property using CSS3 and HTML

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


Don't want to miss updates? Please click the below button!

Follow MindStick