Prevent parent div from collapsing when inner children are floating
There are many solutions for this problem-
1 - (CSS) Using Overflow attribute
Set the attribute overflow:hidden; for the parent div
This solution might not work on every browser.
<div style="overflow:hidden">
<div style="float:left"></div>
<div style="float:right></div>
</div>
2- (HTML + CSS) Using an extra div inside parent
Create an extra div with 0 height and width and set attribute clear:both;
This will place the extra div below the floating div and allow parent to maintain its structure
<div>
<div style="float:left"></div>
<div style="float:right></div>
<div style="clear:both"></div>
</div>
Written by Sachin Saluja
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Hacks
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#