The Developer Brains


CSS3 OVERFLOW

Web Designing | Web Development


SEE MORE














</CSS3 OVERFLOW PROPERTY>





Web Designers use overflow property to add scrollbar when the width or height of the content is bigger than the container size.


SEE MORE
























</CSS3 OVERFLOW PROPERTY>


What is CSS3 Overflow property?

Overflow property is used to fit the content inside the containers with horizontal or vertical scrollbars
  • CSS3 Overflow syntax
    overflow: auto | scroll | visible | hidden | initial | inherit;
  • Clearfix
    The overflow property is also used in float clearing (clearfix).


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow:auto;
}
</style>




	

<head>
	<style>
.tdb-overflow{
	width:60px;
	height:100px;
	overflow:auto;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow">Overflow property</h1>
</body>




Try it Yourself





OVERFLOW-X

Overflow-x property is used to fit the content inside the containers with horizontal scrollbar.
  • CSS3 Overflow syntax
    overflow-x: auto | scroll | visible | hidden | initial | inherit;


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow-x:auto;
}
</style>




	

<head>
	<style>
.tdb-overflow{
	width:60px;
	height:100px;
	overflow-x:auto;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow"Overflow property</h1>
</body>




Try it Yourself





OVERFLOW-Y

Overflow-y property is used to fit the content inside the containers with vertical scrollbar.
  • CSS3 Overflow syntax
    overflow-y: auto | scroll | visible | hidden | initial | inherit;


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow-y:auto;
}
</style>




	

<head>
	<style>
.tdb-overflow{
	width:60px;
	height:50px;
	overflow-y:auto;
	overflow-x:hidden;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow">Overflow property</h1>
</body>




Try it Yourself





OVERFLOW VISIBLE

Overflow:visible is default value of CSS3 Overflow property. The overflow is renders outside the container box.



<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:100px;
	overflow: visible;
	background-color:black;
	color:orange;
}
</style>




<head>
	<style>
	.tdb-overflow{
	width:100px;
	height:100px;
	overflow: visible;
	background-color:black;
	color:orange;
}
	</style>
</head>
<body>
	<h1 class="tdb-overflow">Overflow property</h1>
</body>




Try it Yourself





OVERFLOW SCROLL

By using this property. The overflow is clipped, and the vertical and horizontal scroll-bars are added to the HTML container classes.
  • CSS3 Overflow syntax
    overflow-y: scroll;


<style>
/*example*/
.tdb-overflow{
	width:100px;
	height:60px;
	overflow: scroll;
	background-color:black;
	color:orange;
}
</style>




	

<head>
	<style>
	.tdb-overflow{
	width:100px;
	height:60px;
	overflow: scroll;
	background-color:black;
	color:orange;
}
	</style>
</head>

<body>
	<h1 class="tdb-overflow">CSS3 overflow property</h1>
</body>




Try it Yourself





















Overflow-y property is used to fit the content inside the container with vertical scrollbar.
1. true
2. false




Check Now



CSS3 QUIZ







Next: CSS3 Media Query


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers