Inline-block does not line up the same line [duplicate] - html

Question

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
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>

Answer 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.
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>

Answer 2

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}