Inline-block does not line up the same line

Question

I use display: inline-block for div.left - div.right and div.red - div.yellow but none of them are in the same line. I set the width exactly. But it does not work at all.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  width: 800px;
}
.left, .right, .red, .yellow {
  display: inline-block;
  vertical-align: top;
}
.left {
  width: 250px;
  height: 500px;
  background: gray
}
.right {
  width: 550px;
  height: 550px;
  background: blue;
}
.red {
  background: red;
  width: 275px;
  height: 200px;
}
.yellow {
  background: yellow;
  width: 275px;
  height: 200px;
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="red-yellow">
      <div class="red"></div>
      <div class="yellow"></div>
    </div>
  </div>
</div>

add `font-size: 0` to the `container`... as to why read read [this](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements); see a similar example [here](https://stackoverflow.com/questions/45903586/why-do-i-get-a-gap-between-last-element-in-one-form-and-first-element-in-second/45903840#45903840) — kukkuz, Apr 23 '19 at 03:40

Andy Hoffman · Answer 1 · 2019-04-23T03:39:20.127

Update

If you need to keep inline-block styles, you need the .left and .right divs to add up to 800px. The thing with inline-block is that it will include white space and add it to the width. This is why the wrapping is still occurring. The following image shows the white space that is causing the wrapping.

There are many ways to remove white space and make this fit. One way is to add an HTML comment between the .left and right div, which removes all white space.

<div class="container">
  <div class="left"></div><!-- 
   --><div class="right">
    <div class="red-yellow">
      <div class="red"></div>
      <div class="yellow"></div>
    </div>
  </div>
</div>

Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  width: 800px;
}
.left, .right, .red, .yellow {
  display: inline-block;
  vertical-align: top;
}
.left {
  width: 250px;
  height: 500px;
  background: gray
}
.right {
  width: 550px;
  height: 550px;
  background: blue;
}
.red {
  background: red;
  width: 275px;
  height: 200px;
}
.yellow {
  background: yellow;
  width: 275px;
  height: 200px;
}

<div class="container">
  <div class="left"></div><!--
  --><div class="right">
    <div class="red-yellow">
      <div class="red"></div>
      <div class="yellow"></div>
    </div>
  </div>
</div>

If you add display: flex to the .container, the immediate children (.left and .right) will align in the same row. The .right div is 50px taller than the .left div because of the explicit width being set (550px for .right, 500px for .left).

Also, you can remove this, as it will no longer have any effect due to the flexbox container.

.left, .right, .red, .yellow {
  display: inline-block;
  vertical-align: top;
}

Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  width: 800px;
  display: flex;
}

.left {
  width: 250px;
  height: 500px;
  background: gray
}
.right {
  width: 550px;
  height: 550px;
  background: blue;
}
.red {
  background: red;
  width: 275px;
  height: 200px;
}
.yellow {
  background: yellow;
  width: 275px;
  height: 200px;
}

<div class="container">
  <div class="left"></div>
  <div class="right">
    <div class="red-yellow">
      <div class="red"></div>
      <div class="yellow"></div>
    </div>
  </div>
</div>

Thank you so much! But you can tell me. Why doesnt my code work. This is my exercise which is only use display: inline-block, other properties does not accept! — Hiep Nguyen, Apr 23 '19 at 03:26
@HiepNguyen I'm glad it's working for you. I’d be grateful if you could select my answer as the chosen answer. — Andy Hoffman, Apr 23 '19 at 03:51

score 0 · Answer 2 · answered Apr 23 '19 at 06:58

if use display: inline-block , there will be some space between the elements. In order to overcome that u can use float property so that every element will be aligned in the same line.

If u want to go with display: inline-block property, you have to reduce the width of .red and .yellow,say for example

.red,.yellow{ width: 270px}

Inline-block does not line up the same line

2 Answers2

Update