CODEWITHSUNDEEP
css
NullBy7e
NullBy7e

Reputation: 546

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.

Upvotes: 3

Views: 7634

Answers (1)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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.

Upvotes: 5

Related Questions