div vertical align not working

Question

After searching through various articles, I can't get vertical-align: middle working inside a div.

What the desired result is, both with float: left present in the div attributes: ________ _______ | | | | | lorem | | ipsum | |________| |_______|

.tile {
  float: left;
  width: 50%;
  min-height: 50px;
  text-align: center;
  background-color: blue;
}
#nav {
  display: table;
}
.middle {
  display: table-cell;
  vertical-align: middle;
  background-color: red;
}

<div class="tile" id="nav">
  <div class="tile middle">lorem</div>
  <div class="tile">ipsum</div>
</div>

What am I doing wrong? Unless it is impossible as stated in this article article.

Answer 1

you have inner div the same class as parent, remove it, it will work

   <div class="nav">
   <div class="tile middle">lorem</div>
   <div class="tile">ipsum</div>
   </div>

http://fiddle.jshell.net/murjjchg/

Answer 2

May be, this work for you.

CSS:

#nav { 
    display: table; 
     width:50%;
}
.title { 
    float: left;  
    width: 100%; 
    display:table-cell;  
    background-color: blue; 
}
.middle {  
    display:table-cell;
    vertical-align: middle;
    background-color: red; 
}
.cincuenta {           
    text-align: center;
     min-height: 50px;
}

HTML:

<div id="nav">
    <div class="cincuenta middle">lorem</div>
    <div class="cincuenta title">ipsum</div>
</div>

Working Demo