Open In App

How to prevent parents of floated elements from collapsing in CSS?

Improve
Improve
Like Article
Like
Save
Share
Report

It is known that HTML elements like div, paragraphs, texts, etc. grow to fit the content of their child. But if the child of those elements is floated either to the right or left then the parents may collapse. That is, they will lose their actual behavior.

Let’s understand this with an example: Consider the below code. In the below program, a parent div with a green background has 6 other child div elements. None of the parents or the children are floated here. Let’s compile and see the output of the code. 

html




<!DOCTYPE>
<html>
   
<head>
    <title>Floats and collapsing parents</title>
    <style>
        div{
             padding: 5px;  
        }
    </style>
</head>
<body>
    <!-- Parent Div -->
    <div style="background-color: green;">
 
        <!-- Children div's begins -->
        <div>HTML5</div>
        <div>CSS3</div>
        <div>JavaScript</div>
        <div>Python</div>
        <div>MySQL</div>
        <div>MongoDB</div>
        <!-- Children div's ends -->
 
    </div>
</body>
   
</html>


Output: Now let’s make all of the children div in the above code float to the left and see the difference in the output: 

html




<!DOCTYPE>
<html>
   
<head>
    <title>Floats and collapsing parents</title>
    <style>
        div{
             padding: 5px;  
        }
    </style>
</head>
<body>
    <!-- Parent Div -->
    <div style="background-color: green;">
 
        <!-- Children div's begins, floated to left -->
        <div style="float: left;">HTML5</div>
        <div style="float: left;">CSS3</div>
        <div style="float: left;">JavaScript</div>
        <div style="float: left;">Python</div>
        <div style="float: left;">MySQL</div>
        <div style="float: left;">MongoDB</div>
        <!-- Children div's ends -->
 
    </div>
</body>
   
</html>


Output: You can clearly see in the output that the parent div is collapsed and loses it’s green background. There are many ways to prevent the parent of floated elements from collapsing in CSS:

Method 1 (Using Overflow Property):

We can use the overflow property of CSS to prevent the parents from collapsing. Set the value of the overflow property as “auto” for the parent and it will not collapse any more. Let’s apply this in the affected code shown above and see the result. 

html




<!DOCTYPE>
<html>
   
<head>
    <title>Floats and collapsing parents</title>
    <style>
        div{
             padding: 5px;  
        }
    </style>
</head>
<body>
    <!-- Parent Div -->
    <!-- Using overflow: auto; for parent -->
    <div style="background-color: green; overflow: auto">
 
        <!-- Children div's begins, floated to left -->
        <div style="float: left;">HTML5</div>
        <div style="float: left;">CSS3</div>
        <div style="float: left;">JavaScript</div>
        <div style="float: left;">Python</div>
        <div style="float: left;">MySQL</div>
        <div style="float: left;">MongoDB</div>
        <!-- Children div's ends -->
 
    </div>
</body>
   
</html>


Output:

Method 2 (Making parent floated):

The second method is to make the parent also floated according to the child elements. This will also help preventing from the parent to collapse. But a drawback is you will have to make all of the parents floated, that is, current effected parent, parent of current effected parent and so on. For now, let’s change the parent to be floated to left according to other children divs and see the result: 

html




<!DOCTYPE>
<html>
   
<head>
    <title>Floats and collapsing parents</title>
    <style>
        div{
             padding: 5px;  
        }
    </style>
</head>
<body>
    <!-- Parent Div -->
    <!-- Making the parent also floated to
        prevent collapsing -->
    <div style="background-color: green; float: left">
 
        <!-- Children div's begins, floated to left -->
        <div style="float: left;">HTML5</div>
        <div style="float: left;">CSS3</div>
        <div style="float: left;">JavaScript</div>
        <div style="float: left;">Python</div>
        <div style="float: left;">MySQL</div>
        <div style="float: left;">MongoDB</div>
        <!-- Children div's ends -->
 
    </div>
</body>
   
</html>


Output:

Method 3(Specifying height Explicitly):

One can also fix the height of the collapsed parent explicitly to prevent it from collapsing. The problem with this fix is if the browser is resized or the sizes of children is changes in future then the parent may have a chance to collapse again. 

html




<!DOCTYPE>
<html>
   
<head>
    <title>Floats and collapsing parents</title>
    <style>
        div{
             padding: 5px;  
        }
    </style>
</head>
<body>
    <!-- Parent Div -->
    <!-- Specifying height for parent explicitly to
        prevent collapsing -->
    <div style="background-color: green; height: 30px">
 
        <!-- Children div's begins, floated to left -->
        <div style="float: left;">HTML5</div>
        <div style="float: left;">CSS3</div>
        <div style="float: left;">JavaScript</div>
        <div style="float: left;">Python</div>
        <div style="float: left;">MySQL</div>
        <div style="float: left;">MongoDB</div>
        <!-- Children div's ends -->
 
    </div>
</body>
   
</html>


Output:

Method 4(Using display and clear properties):

One can also use the display and clear properties at the same time for parent to prevent it from collapsing. Specify “display: table;” and “clear: both;” for the parent and see the difference: 

html




<!DOCTYPE>
<html>
   
<head>
<title> Floats and collapsing parents </title>
    <style>
    div
    {
        padding: 5px;
    }
    </style>
</head>
<body>
    <!-- Parent Div -->
    <!-- Using display and clear property to
        prevent collapsing -->
    <div style="background-color: green; display: table; clear: both; ">
 
        <!-- Children div's begins, floated to left -->
        <div style="float: left;">HTML5</div>
        <div style="float: left;">CSS3</div>
        <div style="float: left;">JavaScript</div>
        <div style="float: left;">Python</div>
        <div style="float: left;">MySQL</div>
        <div style="float: left;">MongoDB</div>
        <!-- Children div's ends -->
 
    </div>
</body>
   
</html>


Output:



Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads