Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 26 Oct, 2021

It is known that HTML elements like div, paragraphs, texts etc. grows itself to fits the content of their child. But if the child of those elements are floated either to right or left then the parents may collapse. That is, they will loose their actual behaviour.
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 parent or the childs are floated here. Let’s compile and see the output of the code. 
 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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 to 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 looses 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




My Personal Notes arrow_drop_up
Recommended Articles
Page :