title: Position:absolute & float left/right does not work well
body: <p>I have problem with position: absolute and floats...</p>
  
  <p>As you can see in fiddle, when you resize browser, text from left side goes below the image, but what I want is to go above the image. </p>
  
  <p>When I remove <em><code>position: absolute</code></em> on <strong><code>.image-ipad</code></strong>, it works like that, but in my project I need image to stick on left side, and text on right side (normal)</p>
  
  <p>Code:</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>   &lt;section class="case eat-login"&gt;
          &lt;div class="row"&gt;
  
  &lt;h3 class="stick-right"&gt;Login Screen&lt;/h3&gt;
   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt; 
  &lt;img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px"&gt;
  
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.stick-right{
      float:right;
      clear:both;
  }
  .eat-login {
      position: relative;
      padding: 130px 0 130px;
      clear: both;
  
  }
  .eat-login p{
      text-align: right;
      float: right;
      clear: both;
      width: 45%;
      font-size: 15px;
      font-family: "Proxima Nova";
      color:#9e9d9d;  
      line-height: 25px;
  }
  img.image-ipad {
      left:0px;
      top:40px;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/jt9jk2g0/6/" rel="nofollow">http://jsfiddle.net/jt9jk2g0/6/</a></p>
  
  <p>Thanks!</p>