StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>A floated element's height does not push/expand or affect the parent element's height, unless the parent element contains a clear at the end.</p> <p>You need to use some clearfix methods on the parent containers when using floats.</p> <p><a href="http://css-tricks.com/snippets/css/clear-fix/" rel="nofollow">http://css-tricks.com/snippets/css/clear-fix/</a></p> <p>Add the following to your <strong>CSS</strong>: </p> <pre><code>.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ </code></pre> <p>For all parent containers containing floated child elements, add the class <code>.clearfix</code>, like this:</p> <pre><code><div class="clearfix"> <div class="float-left">This is floated left.</div> <div class="float-right">This is floated right.</div> </div> </code></pre> <p>In your case, you will want to add the <code>.clearfix</code> class to your <code><ul></code> contained in your <code>#menucontainer</code> div, since you are floating the <code><li></code> tags.</p> <p>If you're still confused, check out this demo of the different scenarios involving floats and clears to get a better understanding of how it works: <a href="http://themergency.com/clearfix/clearfix_demo_4_micro_clearfix.htm" rel="nofollow">http://themergency.com/clearfix/clearfix_demo_4_micro_clearfix.htm</a></p>

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