Why the container element is not taking the actual height when having floated children?
In frequent case, we may notice that the container element will not grow as per the height of the children. This article deals with the fixes for the solution. The sample issue is reproduced here for demonstration.
In the above example the container is not taking the height of the children. It is an issue encountered frequently.
In order to fix this, we may look at the following fix.
The container element .wrapper is a block element. It will take up 100 % width of the container or body.
The .wrapper is having only floated elements. So its height is collapsed to 0 still width remains 100%.
Generally div is a block element stacking one by one. When it is floated, it moves above one by one. It will appear side by side up to the maximum of the container.
The solutions explained here are commented in the demonstration link.
Solution 1:
Adding an empty div with clear:both at the end of the parent element will clear the floated elements. This solution will add overhead to the markup. Always a CSS solution is advisable.
Solution 2:
Adding clear fix to the element in CSS way.
.wrapper{
clear:both;
content:’’;
display:table;
}
Solution 3:
Adding overflow:hidden; to .wrapper will fix the solution.
Solution 4:
Adding display:inline-block and width:100% will also fix the issue.
Please feel free to leave comments if you need further explanation to the fixes or anything else left uncovered in this article.
Comments
Post a Comment