How to top align two cell divs within a table div when one cell div contains an absolute positioned div?

Question

How do I top align two cell divs within a table div when one cell div contains an absolute positioned div?

In this example the cell div that does not contain an absolutely positioned div gets pushed down.

HTML:

<div id="table">
  <div>
    <div>1 11 1</div>
  </div>
  <div>
    <div>
      <div id="rightIsOnTop">
        <div id="textThatIsBelow">textThatIsBelow</div>
        <div id="textThatIsOnTop">on top</div>
      </div>
    </div>
  </div>
</div>

CSS:

body, html {
  font-size:x-large;
  margin:0px;
  padding:0px;
}
#table {
  display: table;
  z-index: 5; /* So that other elements can be put above or below this. */
  position: relative; 
}
#table > div {
  display: table-cell;
}
#table > div > div {
  vertical-align:top;
  min-width:150px;
  margin:10px;
  background:grey;
}
#rightIsOnTop {
  position:relative;
  min-width:80px;
  overflow:hidden;
}
#textThatIsBelow {
  position: absolute;
  white-space:nowrap;
  display:inline-block;
}
#textThatIsOnTop {
  float: right;
  position:relative;
  display:inline-block;
  background:red;
}

This is how they are rendered:

This is how I would like them to be rendered:

Thank you for your help

Answer 1

You forgot to add vertical-align: top; to your cell div but not to your content.

It should be

#table > div {
display: table-cell;
vertical-align:top;}

https://jsfiddle.net/xg7a38yd/1/

Answer 2

You can use Flexbox model of css3 to archieve this:

.flexBox {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

Here are fiddle example

You can use flex property on child element to adjust the size of divs.

Here you can get a complete guide of flexbox

Answer 3

This rule #textThatIsOnTop {float: right;} makes the boxes misaligned.

But making #textThatIsOnTop to position:absolute sounds more reasonable to me, no floating element is needed. It will also sort out the alignment issue.

#textThatIsBelow {
    white-space:nowrap;
    display:inline-block;
}
#textThatIsOnTop {
    position: absolute;
    right: 0;
    top: 0;
    display:inline-block;
    background:red;
}

Full updated code/demo as follows.

 body, html { font-size:x-large; margin:0px; padding:0px; } #table { display: table; z-index: 5; /* So that other elements can be put above or below this. */ position: relative; } #table > div { display: table-cell; } #table > div > div { vertical-align:top; min-width:150px; margin:10px; background:grey; } #rightIsOnTop { position:relative; min-width:80px; overflow:hidden; } #textThatIsBelow { white-space:nowrap; display:inline-block; } #textThatIsOnTop { position: absolute; right: 0; top: 0; display:inline-block; background:red; } 

 <div id="table"> <div> <div>1 11 1</div> </div> <div> <div> <div id="rightIsOnTop"> <div id="textThatIsBelow">textThatIsBelow</div> <div id="textThatIsOnTop">on top</div> </div> </div> </div> </div>