2

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>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Hiep Nguyen
  • 33
  • 1
  • 5
  • 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

2 Answers2

1

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.

enter image description here

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>
Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
0

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}
John_ny
  • 767
  • 12
  • 33