CSS vertical middle align

I had two child div within a parent div with different heights and I wanted to align them at middle of the parent div. I used float:right on both of them and removed clear:both. Then I used margin property of the less tall element to align them at verticle middle.

The next problem was to expand the parent element when these elements float out of their container, this was achived using display:table; attribute on the parent div css

Final html looks like

<div class="topbar">

    <div class="rightelement"></div>

    <div class="leftelement">

    </div>

</div>

and here is the css

  .topbar

{

    width: 100%;

    background-color:black;

    height:29px;

    display:table;

}

.leftelement {

       float: right;

       margin:0px;

       text-align: right;

       width:auto;

    background-color:transparent;

    margin-top:7px;

}

.rightelement {

       float: right;

       margin:0px;

       text-align: right;

       width:auto;

    background-color:transparent;

}