Facing issue in display:inline-block property

Question

I am trying to place two divs side by side using css display: inline-block; property. But my divs are placed one below the other.

Link of fiddle:- https://jsfiddle.net/04cc1n8j/

HTML

<div class='outerDiv'>
  <div class='innerDiv1'></div>
  <div class='innerDiv2'></div>
</div>

CSS

.outerDiv{
  width:300px;
  height:200px;
  margin:0px;
  padding:0px;
}
.innerDiv1{
  width:100px;
  height:200px;
  display:inline-block;
  background-color:red;
  margin:0px;
  padding:0px;
}

.innerDiv2{
  width:200px;
  height:200px;
  display:inline-block;
  background-color:green;
  margin:0px;
  padding:0px;
}

[Updated Fiddle](https://jsfiddle.net/chipChocolate/04cc1n8j/4/) — Weafs.py, Jul 14 '16 at 21:23
Several solutions to this. Here's one: remove whitespace in HTML: https://jsfiddle.net/04cc1n8j/5/ ... see dupe for other methods and explanations. — Michael Benjamin, Jul 14 '16 at 21:28
Try floating them instead, then declare `overflow: auto` on the parent element to clear the `float`. Or apply `margin-right: -4px;` to `.innerDiv1`. — UncaughtTypeError, Jul 14 '16 at 21:29
Thanks Michael_B & chipChocolate.py for helping with the correct answers — Ritesh Choudhary, Jul 14 '16 at 21:38

score 1 · Answer 1 · answered Jul 14 '16 at 21:22

1

The width of the white-space between the inline-block elements is breaking your layout. This article should help.

answered Jul 14 '16 at 21:22

Ito Pizarro

1,607
1
11
21

Thanks Ito, this article was really helpful. – Ritesh Choudhary Jul 14 '16 at 21:36

Facing issue in display:inline-block property

1 Answers1