html tutorial - How to fix the issue of CSS collapsing parent having floating children - html5 - html code - html form
Answer: Use the CSS clear Property
When float property applied to the element in the non floated parent, the parent element does not stretch automatically to the floated elements.This behavior is know as collapsing parent if you not apply some properties like background or borders to the parent elements,and it deal to prevent layout and cross-browser problem.
Fixing Collapsing Parents in Current Browsers
The CSS :after pseudo-element having the content to resolve the confusing parent problems in browsers like Firefox, Chrome, Safari, IE8.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fixing Collapsing Parent Issue</title>
<style type="text/css">
.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 Side.</div>
<div class="column-right">Floated to right Side.</div>
</div>
</body>
</html>Check out the tutorial on CSS Alignment for more solutions on fixing collapsing parents.