title: Circumventing webkit bug on positioning <li> bullet wrong after float element
body: <p>There is a <a href="https://bugs.webkit.org/show_bug.cgi?id=89829" rel="nofollow" title="bug in WebKit">bug in WebKit</a> that causes the browser (Safari, Chrome, ...) to position the bullet or number of the first &lt;LI> in an &lt;OL> or &lt;UL> on the right side if it is preceeded by a floated element. Here's a  simple example of the problem:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body style="width:250px"&gt;
      &lt;div style="width: 100%; float: left;"&gt;
      List with bullet at the wrong side:
      &lt;/div&gt;
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li&gt;bullet ends up here -&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Since it has been reported there is some slight chance that it might be fixed at some point.</p>
  
  <p>In the meanwhile, how can I, by only modifying the styling of the <em>existing</em> DIV:s, (i.e. without modifying the structure) circumvent the problem?</p>