title: CSS - How to resize texboxes with background image when browser is resized?
body: <p>Please not I'm not really skilled with CSS.<br />
  I'm working on a personal project and I have two columns containing text-boxes. Theses textboxes are customized with a background-image.<br />
  This perfectly works.</p>
  
  <p>But when I'm resizing my browser, the texboxes overlap each other. When overlapping, I'd like the texboxes to be resized ; and when a min width is reached, I'd like to place the texboxes below each-other.<br />
  Can I do this in pure CSS ? If so, how can I change what I wrote to reach this goal ?</p>
  
  <p>(Oh, and BTW, I need compatibility for IE8+, no need to support IE6 nor 7). Thank you !</p>
  
  <p><strong>Here is a <a href="http://jsfiddle.net/fXa9x/" rel="nofollow">JsFiddle</a> to better understand the problem</strong> and see the code I've written so far.</p>
  
  <p>I suppose the problem is from</p>
  
  <pre><code>width: 278px;
  </code></pre>
  
  <p>but I tried with <code>%</code> and it didn't resolve the problem (you can try it).<br />
  Thank you for your help</p>