Edit Question - KnowledgeHub

Title Body

Although elements like <div> s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: If floated elements have non-floated parent elements, the parent will collapse. For example: <div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div> The parent div in this example will not expand to contain its floated children - it will appear to have height: 0 . How do you solve this problem? I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out. Solution 1 Float the parent. <div style="float: left;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div> Pros : Semantic code. Cons : You may not always want the parent floated. Even if you do, do you float the parents' parent, and so on? Must you float every ancestor element? Solution 2 Give the parent an explicit height. <div style="height: 300px;"> <div style="float: left;">Div 1</div> <div styl

Tags (comma-separated) Cancel