Layout quirks for two horizontal divs - html

Question

I experienced strange behaviour when trying to position two divs horizontally. I got the same behaviour both for firefox and chrome, so I figured out there might be something deeper about layout that I don't understand.
Here is my HTML:
<div class="parent"><div class="cell left">a</div><div class="cell right">b</div></div>
It is on one line to avoid the whitespaces.
Here is my CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
}
.cell {
height: 100%;
display: inline-block;
margin: 0;
padding: 0;
/* vertical-align: bottom; */ /* toggle this! */
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: royalblue;
width: 50%;
}
I include here an example jsfiddle.
Here is a picture:
The current code works correctly. I get two divs, each 50% width of the screen.
First quirk: No text in divs
The first quirk happens if I remove the text from both of the divs. That means, if my HTML would be:
<div class="parent"><div class="cell left"></div><div class="cell right"></div></div>
In this case I get a vertical scroll bar.
Picture:
Second quirk: Text only in one div:
This is where the really strange things happen.
If I have text only in one of the divs, like this:
<div class="parent"><div class="cell left">a</div><div class="cell right"></div></div>
The div with the text is pushed down to the bottom, and the other one is unchanged. Pictures:
Solution
I found (by trial and error) that if I add
vertical-align: bottom;
to .cell, it fixes everything.
My problem is that I don't understand why. I will be happy to get any explanation to what is happening here.

Answer 1

Inline elements and boxes vertically align, by default, to the baseline. There are three, not two, inline boxes in your line.
When an inline-block element contains text, its baseline is the base of the last line of text it contains. When it doesn't have any content, its baseline is the the bottom of the box.
The third box on the line is called a strut. Its purpose is to give a minimum height to the line. It is zero width, but is like a text character from the font of the containing block and has a line-height that is defined from the containing block. It is always vertically aligned to the baseline.
So your first scenario is this.
Your second scenario is this. See how the bottom of the strut is below the bottom of the boxes, so the total height of the line is greater than 100% that of the viewport, causing the scrollbar to appear.
Your third scenario is this.

Answer 2

You can try this may be all issue solved for this css given " float:left " in " .cell " And " overflow: hidden" in ".parent":
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
}
.cell {
height: 100%;
display: inline-block;
margin: 0;
padding: 0;
float: left;
/* vertial-align: bottom; */ /* toggle this */
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: royalblue;
width: 50%;
}
See Fiddle Demo

Answer 3

vertical-align it acts on the inline-block, rather than its contents.
vertical-align aligns by the border of the line, in which our inline-block is.
when the vertical-align is not specified, the alignment acts by the bottom border of the contents of the inline-block:
<div class="parent"><div class="cell left">a<br>a
</div><div class="cell right">b</div></div>
https://jsfiddle.net/glebkema/qeh9zugg/
UPD. vertical-align: top; and vertical-align: middle; correct the problems by the same way as vertical-align: bottom;.

Answer 4

This may help you.
Add display:table; to parent div and display:table-cell; to child div.
HTML:
<div class="parent"><div class="cell left"> a </div><div class="cell right">b</div></div>
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
display:table;
vertial-align: middle;
}
.cell {
height: 100%;
display: table-cell;
margin: 0;
padding: 0;
vertial-align: middle ; /* toggle this */
}
.left {
background-color: lightblue;
width: 50%;
}
.right {
background-color: royalblue;
width: 50%;
}