title: 2 DIVs next to eachother without Float
body: <p>DIV#1's content is an image and the content of DIV#2 is a input text field.</p>
  
  <pre><code>#1 {
    width: 48px;
    height: 48px;
  }
  
  #2 {
    height: 48px;
  }
  </code></pre>
  
  <p>I don't want to use floats because then the image of #1 breaks layout upon zooming the page.
  I tried it with a table but then I can't set margins and padding to them.
  Also tried display: inline-block but then I can also not use padding/margin.</p>
  
  <p>I use % sizing on my entire page with the exception of padding so it's all works with zoom and different resolutions.</p>