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

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 floatted 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 floatted here. Let’s compile and see the output of the code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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, floatted 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>                    

chevron_right


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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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, floatted 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>                    

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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, floatted 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>                    

    chevron_right

    
    

    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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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, floatted 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>                    

    chevron_right

    
    

    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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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, floatted 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>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.