Q:

How to fix the issue of CSS collapsing parent having floating children

mhmadesk
Save to bookmark
|
2022-05-17
|
  285 
Easy
0

How to fix the issue of CSS collapsing parent having floating children

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the CSS clear property

When float property applied to the element inside the non floated parent, the parent element doesn't stretch up automatically to accommodate the floated elements. This behavior is typically known as collapsing parent. This is not always obvious if you do not apply some visual properties like background or borders to the parent elements, but it is important to be aware of and must dealt with to prevent strange layout and cross-browser problems.

The CSS :after pseudo-element in conjunction with the content property is used to resolve the collapsing parent issues in the browsers like Firefox, Chrome, Safari, etc.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fixing Collapsing Parent Issue</title>
<style> 
    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .container{
        background:yellow;
        border: 1px solid #000000;      
    }
    .column-left, .column-right{
        width: 200px;        
        margin: 10px;
        padding: 10px;
    }
    .column-left{
        float: left;       
        background: #ff0000
    }
    .column-right{
        float: right;
        background: #00ff00;
    }
</style>
</head>
<body>
    <div class="container clearfix">
        <div class="column-left">Floated to left.</div>
        <div class="column-right">Floated to right.</div>
    </div>
</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

HTML / CSS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to create custom cursor using CSS... >>
<< How to highlight the background of alternate table...