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

07 Dec, 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.
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>                    
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>                    
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.htmlhtml<!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:
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>                    
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:htmlhtml<!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 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>                    
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.htmlhtml<!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:
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>                    
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:htmlhtml<!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:
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>
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
kashishsoda
Picked
Technical Scripter 2018
Web-Programs
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
Hide or show elements in HTML using display property
REST API (Introduction)