Vertical Centering floated elements

by Josh Weir

HTML

<div id="wrapper" class="jw-group">
    <div>
        <div class="l">
             AAAA AAA AAAAAA AAAA AAAA AAAA AAA AAAAAAA AAA AA AAAA AAA AA AAAA AAAA AA AA AAAA AAAAa
        </div>
    </div>
    <div>
        <div class="r">
            BBB
        </div>
    </div>
    <div>
        <div>
            <div class="l">111
            </div>
            <div>222
            </div>
        </div>
    </div>
</div>

CSS

#wrapper{
    width:100%;
    margin:0 auto;
    border:1px solid blue;
    /*overflow:hidden;*/
}
#wrapper>div{
    display:inline-block;
    vertical-align:middle;
    width:20%;
}
.l{
    float:left;
}
.r{
    float:left;
}

.jw-group:before,
.jw-group:after {
  content: "";
  display: table;
}
.jw-group:after {
  clear: both;
}
.jw-group {
  *zoom: 1;
}