title: float div with fixed background in same line error
body: <p>i've got two divs with fixed background image... what i want is that the divs should float one left and one right...here the code:</p>
  
  <pre><code>&lt;div class="stop2" style="height: 600px;" data-natural-height="900" data-natural-width="1400"&gt;
  
      &lt;div  id="stop2SX"&gt;&lt;/div&gt;
      &lt;div  id="stop2DX"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css:    </p>
  
  <pre><code>#stop2SX{
  
  
      background-image:url(Stop2_small_SX.jpg);
      background-repeat:no-repeat;
      background-attachment: fixed;
      background-position-x: 0px;
      background-position-y: 0px;
      width: 50%;
      height: 100%;
  
  }
  #stop2DX{
      background-image:url(Stop2_small_DX.jpg);
      background-repeat:no-repeat;
      background-attachment: fixed;
      background-position-x: 0px;
      background-position-y: 0px;
      width: 50%;
      height: 100%;
      right: 0px;
      float: right;
      display: inline;
  }
  </code></pre>
  
  <p>the second div is not visible </p>
  
  <p>here's the pic:</p>
  
  <p><a href="https://i.stack.imgur.com/90rbz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/90rbz.png" alt="enter image description here"></a></p>