Here I created two div blocks, wrapped them in a wrapper and put them in one line through the display: table-cell attribute display: table-cell . Everything is fine, it is leveled as it should, if the text is placed inside the blocks: http://jsbin.com/sorenow/5/edit?html,css,output

But I need to place the iframe in the second block, and here the fun begins ... Some indents showed some indentation: http://jsbin.com/yamaqij/3/edit?html,css,output

Tell me, please, at least in which direction to dig, in order to get rid of it? The player fits perfectly in the block .. Why did the next indent appear from above?

  • I apologize, I misled you. Forget everything I wrote earlier - I updated the answer. - neluzhin
  • @terron Now everything has finally become clear! Rays good to you) - Anomnimel

1 answer 1

There are two ways to solve your problem:

  1. Add a vertical-align: top left column.
  2. Use float meshes (in which case you also need clearfix) or flex. I would recommend this particular solution.

Why did the text go down? Look at the screenshot and the red line:

Screenshot

The text is aligned to the line level of the largest element in the table row.