title: How to make div not overlap another div inside parent div
body: <p>So basically I have mainDiv, which is pretty much size of body. 
  In mainDiv there are 2 divs which are supposed to be next to each other and they are until resize or mobile device comes in. Problem is that second div completely overlaps first one. </p>
  
  <p><a href="http://img17.imageshack.us/img17/473/yn9x.jpg" rel="nofollow noreferrer">Desired outcome http://img17.imageshack.us/img17/473/yn9x.jpg</a></p>
  
  <pre><code>#mainDiv { 
      border: 1px solid black;
      height: 670px;
  }
  
  #mainDiv div {
      position:relative;
      border: 1px solid red;
      float: left;
  }
  </code></pre>
  
  <p>Rest of code: <a href="http://jsfiddle.net/fDELs/2/" rel="nofollow noreferrer">http://jsfiddle.net/fDELs/2/</a></p>
  
  <ul>
  <li>I couldn't use width: [value]% because I don't need both divs always to be shown while zooming in (plus it still starts horizontally eating first div).</li>
  <li>I can't use float: left or float:right, because if page gets wider then empty area appears between 2 divs.</li>
  </ul>
  
  <p>Right now I have js workaround solution, which checks the width and position of first div and sets 'left' property of second one, but I would love to do it in CSS.</p>