Vertical Centering Floated Elements - simplified

by Josh Weir

HTML

<div id="wrapper">
    <div>
        <div class="l">
            <p>AAA</p>
        </div>
    </div>
    <div>
        <div class="r">
            <p>BBB</p>
            <p>BBB</p>
            <p>asdf</p>
            <p>asdf</p>
        </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:49%;
}
.l{
    float:left;
}
.r{
    float:left;
}