StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>As <a href="https://stackoverflow.com/questions/1369556/why-cant-i-clearleft-these-labels-in-ie7/1369642#1369642">Emily said</a>, it's not going to work with floats... But then of course, you can just <em>not</em> use floats where appropriate.</p> <p>Change the following statements from your original CSS, turning them from floats into (inline) blocks:</p> <pre><code>form label.field-title { width: 50px; float: none; display: block; } form label.field-last { width: 150px; float: none; display: inline-block; } form label.field-street { width: 310px; float: none; display: block; } form label.field-zip { width: 70px; float: none; display: inline-block; } </code></pre> <p>This will continue to work in other (recent) browsers too.</p> <h3>How does it work?</h3> <p>The problem with IE7's floats is that they can "bubble up" through other floats. E.g. the reason <code>field-last</code> ends up next to <code>field-title</code> is because it doesn't clear its left unlike <code>field-first</code>. But instead of staying next to the <code>field-first</code> it just moves up through it next to <code>field-title</code>.</p> <p>The easiest way to fix that is simply to make <code>field-title</code> a block. That prevents it from any following floats appearing next to it. The same goes for <code>field-street</code>. You don't want anything to appear next to it, so you can just turn it into a block.</p> <p>That doesn't work with <code>field-last</code>, however, because in standards-compliant browsers, the block essentially contains the preceding float. But since that already takes up its full width, there's no room left next to it. Making it an inline-block instead does let it keep its block properties while putting it next to the float, instead of encompassing it.</p> <p>The same thing goes for the <code>field-zip</code>, with only one difference. <code>field-last</code> is already followed by a block, so it doesn't have to worry about anything floating to its right. <code>field-zip</code>, though, is followed by a float, so that needs to clear its left to prevent it from coming up next to the Zip code.</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