0

I have two siblings that both have display: inline-block. Why do I have to lower the sum to 97% to get them to sit next to each other? Ex: https://jsfiddle.net/kcscq271/1/

  <div class="container">
    <img src="./test.jpg">
    <div class="child1">
      Test Stuff
    </div>
  </div>

.container {
  border: 1px solid red;
  width: 300px;
}

.child1 {
  display: inline-block;

  width: 80%
}

img {
  display: inline-block;
  width: 20%;
}
soonerDev
  • 19
  • 5

2 Answers2

1

Inline-block renders html white-space. Put the div right next to the image instead of below.

<div class="container">
  <img src="./test.jpg"><div class="child1">
    Test Stuff
  </div>
</div>

or try float

img {
  float: left;
  display: inline-block;
  width: 20%;
}
Matt McManis
  • 4,475
  • 5
  • 38
  • 93
0

One other way to achieve this is to write your html like this:

<div class="container">
    <img src="./test.jpg"><div class="child1">Test Stuff</div>
</div>

or

<div class="container">
    <img src="./test.jpg"><!--
    --><div class="child1">Test Stuff</div>
</div>
Wim Mertens
  • 1,780
  • 3
  • 20
  • 31
  • Yes, thank you. It seems strange, but not putting whitespace seems to matter. Also not having a border. – soonerDev Sep 08 '16 at 05:20