StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow do you keep parents of floated elements from collapsing?
text
Body
copied!<p>Although elements like <code><div></code>s normally grow to fit their contents, using the <code>float</code> property can cause a startling problem for CSS newbies: <strong>if floated elements have non-floated parent elements, the parent will collapse.</strong></p> <p>For example:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div></code></pre> </div> </div> </p> <p>The parent div in this example will <strong>not expand</strong> to contain its floated children - it will appear to have <code>height: 0</code>.</p> <h1>How do you solve this problem?</h1> <p><em>I would like to create an exhaustive list of solutions here. If you're aware of cross-browser compatibility issues, please point them out.</em> </p> <h2>Solution 1</h2> <p>Float the parent.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div style="float: left;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div></code></pre> </div> </div> </p> <p><strong>Pros</strong>: Semantic code.<br> <strong>Cons</strong>: 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?</p> <h2>Solution 2</h2> <p>Give the parent an explicit height.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div style="height: 300px;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div></code></pre> </div> </div> </p> <p><strong>Pros</strong>: Semantic code.<br> <strong>Cons</strong>: Not flexible - if the content changes or the browser is resized, the layout will break.</p> <h2>Solution 3</h2> <p>Append a "spacer" element inside the parent element, like this:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> <div class="spacer" style="clear: both;"></div> </div></code></pre> </div> </div> </p> <p><strong>Pros</strong>: Straightforward to code.<br> <strong>Cons</strong>: Not semantic; the spacer div exists only as a layout hack.</p> <h2>Solution 4</h2> <p>Set parent to <code>overflow: auto</code>.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div style="overflow: auto;"> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div></code></pre> </div> </div> </p> <p><strong>Pros</strong>: Doesn't require extra div.<br> <strong>Cons</strong>: Seems like a hack - that's not the <code>overflow</code> property's stated purpose.</p> <h1>Comments? Other suggestions?</h1>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload