5

I wanted to display two <div> elements that have width and height side-by-side. I applied inline-block to the <div>s, but the position of the left element is strange:

vertical misalignment

HTML:

<body>
    <div id="myDivTag">content</div>
    <div id="map-canvas">for google map API</div>
</body>

CSS:

#myDivTag, #map-canvas {
    display: inline-block;
    height: 95%;
    width: 49%;
    z-index: 0;
}

The only difference between the two elements is the overflow: hidden option. When I apply overflow: hidden to #myDivTag, it works normally, but I don't know why. I think it has nothing to do with the overflow property. But my thought is clearly wrong. Why?

TylerH
  • 20,799
  • 66
  • 75
  • 101
김진우
  • 161
  • 3
  • 12

2 Answers2

7

By default inline boxes in a line are vertically aligned by their baselines (since the default value of the vertical-align property is baseline) and the baseline of inline-blocks depends on the value of the overflow property. If the value of the overflow property on an inline-block is visible, then the baseline of this inline-block is the baseline of its last line, but if the overflow property has another value (for example hidden), then its baseline is the bottom margin edge.

The documentation says

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

I also suggest you reading this great article in order to understand completely the vertical alignment of inline stuff.

2

Add vertical-align to your css and it should work:

#myDivTag, #map-canvas {
    display: inline-block;
    vertical-align:top;
    height: 95%;
    width: 49%;
    z-index: 0;
}
GaryS
  • 21
  • 1