StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you use a ‘float: right’, make it the first thing on the line:</p> <pre class="lang-html prettyprint-override"><code><div style="border: solid 1px red; text-align: center"> <div style="float:right; background-color: yellow">right</div> <div style="background-color: yellow; float: left">left</div> middle </div> </code></pre> <p>Otherwise it always falls into the next text line.</p> <blockquote> <p>but why!!!!!</p> </blockquote> <p>(1) Because once you've started putting static text on a line, you've got an indeterminate width to fit a floated element into. Say you wrote:</p> <pre class="lang-html prettyprint-override"><code>abc abc abc <div style="float: left">xyz xyz</div> abc abc abc </code></pre> <p>Now imagine you start resizing that window down so that “abc abc abc” just fits on the first line. Now you meet a float, and try to include it on the line you're on. But it doesn't fit: to fit it on, you'd have to have “abc xyz xyz” on the line, reflowing the remaining “abc” to the next line. But! Now you've moved the float's insertion point down a line, so the float has to drop down a line too. But! Now the first line isn't wrapped properly, because there's room for three “abc”s, but the line has been ended prematurely to make way for a float that actually occurs further down the page...</p> <p>The CSS standard solves this logical impasse by making a float on a line with inline text before it wait for the next line.</p> <p>(2) Because that's what Netscape did with <code><img float="right"></code> many, many years ago.</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