Css – 2 DIVs next to eachother without Float


DIV#1's content is an image and the content of DIV#2 is a input text field.

#1 {
  width: 48px;
  height: 48px;

#2 {
  height: 48px;

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.

I use % sizing on my entire page with the exception of padding so it's all works with zoom and different resolutions.

Best Solution

Working DEMO

Make sure that container they are in has equivalent or more width than DIV's(combined) and use this CSS:

#1, #2 { display: inline-block }

Also you can't use numbers as ID's in <HTML5, so I have used a, b instead 1,2 in demo.

You should be able to use padding/margin with this example as long as container width is enough as shown in demo.