Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is Float Containment in CSS?
First, let’s understand float containment before starting this tutorial. So, Float containment is a technique used in the CSS to control the layout of the web page elements.
Whenever we set the ‘float’ property for any HTML element, it automatically gets removed from the original document flow of the web page, but it remains in the viewport. So, developers can face issues like the parent div element not expanding according to the dimensions of the child div element. Let’s understand it via the example below.
Example
In the example below, we have a ‘parent’ div element containing the text and ‘child’ div elements. Here, we haven’t set the width for the parent div element.
Furthermore, we have set the fixed dimensions for the child div element and added the ‘float: left’ CSS property to make it floatable on the left side. In the output, users can observe that the parent div is not expanded according to the child div element’s height as it is floating.
<html>
<head>
<style>
.parent {
border: 2px dotted blue;
width: 300px;
margin: 5px;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid green;
background: yellow;
}
</style>
</head>
<body>
<h2>Using the <i> float CSS property </i> to set floating elements</h2>
<div class = "parent">
<p> This is a random text. </p>
<div class = "child"> </div>
</div>
<div class="parent">
<p> This is a random text. </p>
<div class = "child"> </div>
</div>
</body>
</html>
To solve the above problem, we can use the below techniques.
Use the Contain Property of CSS
The ‘contain’ CSS property removes the particular element and its descendent elements from the document flow, making them independent. When we set the ‘float’ CSS property for any HTML element, it gets removed from the document. So, we can also remove the parent element from the document flow using the ‘contain’ CSS property to fix the layout of floating elements.
Syntax
Users should follow the syntax below to use the ‘contain’ CSS property.
parent {
contain: content
}
In the above syntax, the parent selector selects the parent element of the particular element for which we have set the ‘float’ CSS property.
Example
In the example below, we have taken the same code as it was in the first example. Here, we have added the ‘contain: content’ CSS property to the ‘parent’ div element.
In the output, users can observe that the child div is not overflowing anymore, and it’s perfectly set inside the parent div element.
<html>
<head>
<style>
.parent {
border: 2px dotted pink;
width: 300px;
margin: 5px;
contain: content;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid blue;
background: red;
}
</style>
</head>
<body>
<h2>Using the <i> contain CSS proeprty with float </i> to set floating elements</h2>
<div class = "parent">
<p> Welcome to the TutorialsPoint!. </p>
<div class = "child"> </div>
</div>
<div class = "parent">
<p> Hi! How are you? </p>
<div class = "child"> </div>
</div>
</body>
</html>
Use the Overflow Property of CSS
The ‘overflow’ property of CSS controls the overflow of a particular HTML element. When we set the ‘auto’ value to the ‘overflow’ property, it makes an HTML element scrollable when the content of the element starts overflowing.
Syntax
Users can follow the syntax below to use the ‘overflow: auto’ CSS property as a float containment.
selector {
overflow: auto;
}
Example
In the example below, we have created the ‘card’ div, containing the ‘text’ and ‘image’ div elements. We have set the ‘float: left’ for the image div element and ‘overflow: auto’ for the ‘card’ element.
In the output, users can observe that image fits perfectly in the card element. If we remove the ‘overflow’ property, it overflows from the div element.
<html>
<head>
<style>
.card {
border: 2px dotted pink;
width: 300px;
margin: 5px;
overflow: auto;
}
.image {float: left;}
</style>
</head>
<body>
<h2>Using the <i> overflow: auto CSS proeprty with float </i> to set floating elements</h2>
<div class = "card">
<div class = "text"> I love nature! </div>
<div class = "image"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT58C2HqvIjZnL-UlE0TxpLPf_l6O-h34EhvPABAEk8&s" alt = "image"> </div>
</div>
</script>
</body>
</html>
Use the Grid Layout Module
We can use the ‘display: grid’ CSS property in CSS to create a grid layout on web pages. Here, we can set the ‘float’ CSS property for some HTML content. After that, we can use the ‘display: grid’ and ‘grid-template-columns: 1fr 1fr’ CSS properties to create two columns.
Basically, it sets the floating element in the grid layout, which helps developers fix the webpage layout.
Syntax
Users can follow the syntax below to use the ‘display: grid’ to set floating elements.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
In the above syntax, users can create multiple columns by changing the value of the ‘grid-template-columns’ CSS property.
Example
In the example below, the ‘container’ div element contains the ‘float-left’ and ‘float-right’ div elements. We have set the ‘float’ property value for the div element according to their class names.
We have used the ‘display: grid’ CSS property for the ‘container’ div element. In the output, users can observe how both div elements are set up in the container. One is on the left side, and another is on the right side.
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
display: grid;
border: 3px solid green;
grid-template-columns: 1fr 1fr;
font-size: 2rem;
}
.float-left {float: left;}
.float-right {float: right;}
</style>
</head>
<body>
<h2>Using the <i> display: grid CSS property </i> to set floating elements</h2>
<div class = "container">
<div class = "float-left"> This is a Left Column </div>
<div class = "float-right"> This is a Right Column </div>
</div>
</body>
</html>
Users learned the various float containment techniques in this tutorial. In the first technique, we used the ‘contain’ CSS property. In the second technique, we used the ‘overflow’ property; in the third technique, we used the ‘display: grid’ CSS property.
90 Views
To Continue Learning Please Login