Question

I’m trying to create two side-by-side div elements, but I found that having an iframe inside the left element will push the content of the right element down.

Something like this:

<div style="display: table;">
  <div style="display: table-cell;">
    <iframe src="" style="height: 100px; width: 100px;"></iframe>
  </div>
  <div style="display: table-cell;">
    <span>Why am I pushed down 100px?</span>
  </div>
</div>

This phenomenon does not occur when I use float: left elements, or when I use tables. Here’s a jsfiddle illustrating all the cases: http://jsfiddle.net/shazow/S6JXp/

Is it possible to have a display: table-cell based layout without having one cell being affected by the content of the other cell, even if it contains an iframe?

Update: Updated jsfiddle with the accepted answer: http://jsfiddle.net/shazow/S6JXp/1/

Answer 1

In IE8 + 9, Firefox and Chrome I don’t see the div pushed down. Only when I look at it with IE7 then it is pushed down. But that is because table-cell is not supported in IE7.

For me your code works.

To bring the text to the top change this class:

.fun-table-cell .cell {
    display: table-cell;
    width: 50%;
    vertical-align:top;
    background: yellow;
}