title: Position relative overlaps float-left
body: <p>For a back-end solution of a CMS exclusively, I wanted to enable the user to switch any CMS element to <code>float: left</code> on purpose. However, I had to find that as all my container elements also use relative positioning, any element that is placed next to a floated one, will overlap that one (only as a block, not by content) and thus render the user incapable of using any of the other elements controls.</p>
  
  <pre><code>&lt;div id="container1" class="elContainer" style="float: left;"&gt;&lt;/div&gt;
  &lt;div id="container2" class="elContainer" style=""&gt;&lt;/div&gt;
  
  .elContainer {
     position: relative;
  }
  </code></pre>
  
  <p>You can try this JSFiddle setup to test the issue: <a href="http://jsfiddle.net/PNktA/" rel="nofollow noreferrer">http://jsfiddle.net/PNktA/</a>
  If you remove the float from the first outer container, you will be able to click the edit button. If you keep the float, you cannot click it.</p>
  
  <p>I tried to find a solution that works here, but I failed in doing so. Does anyone know how I can fix this?</p>
  
  <p>It is alright if the solution works in FF and Safari only, as I can demand usage of those browsers for my back-end.</p>