Databases
StackOverflow2013
Postsdbo
POCSS floats & Overlapping boxes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS floats & Overlapping boxes
    text
    copied!<p>I've been messing with CSS, trying to understand floats, etc. Here is what the issue looks like:</p> <p><img src="https://i.stack.imgur.com/3bShk.png" alt="CSS float overlapping"></p> <p>As you can see, the yellow box floats behind the gray and past it. How do I make it stop right before box Two? <strong><a href="http://jsfiddle.net/8pX9s/" rel="noreferrer">Here is my code</a></strong>:</p> <pre><code>&lt;style&gt; /*resests begin*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; /*vertical-align: baseline; */ font-weight:normal; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /*resests end*/ body { font-size:16px; margin:5px; } h1 {font-size:2em;} nav { background-color:#ccc; padding:5px; width:200px; height:200px; margin:10px; } #a { background-color:#FFC; padding:10px; } .r-set { padding-left:10px; float:right; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Title&lt;/h1&gt; &lt;nav class="r-set"&gt; &lt;p&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/p&gt; &lt;/nav&gt; &lt;div id="a"&gt; &lt;h3&gt;One&lt;/h3&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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