Vertically align floating DIVs

Question

I have a portion of a website I am creating that is as follows:

<div id="topbar">
    <div id="topbar_left">
        <form action="Search" method="POST">
            <label for="searchtext">Find Products: </label><input type="text" name="searchtext" id="searchtext" size="30" />
            <input type="submit" value="Search" />
        </form>
    </div>
    <div id="topbar_right">
        You are logged in as Username &bull; <a href="LogOut">Log Out</a>
    </div>
    <div class="clear"></div>
</div>

I would like for the text in topbar_right to be vertically centered to that in topbar_left. However, topbar_right doesn't always contain text, it also can also contain a small form, which displays fine because it is the same height as the one on the left.

Here is my current CSS:

#topbar {
    background-color: #5a87bf;
    padding: 10px 30px 10px 30px;
    margin-bottom: 10px;
    font-size: 9pt;
}
#topbar_left {
    float: left;
}
#topbar_right {
    float: right;
}
.clear {
    clear: both;
}

What is the best way to go about achieving this?

Answer 1

I generally find that setting the line-height helps here. something like this might work:

#topbar_left, #topbar_right {
  line-height: 20px;
}

You can also try fiddling around with the vertical-align CSS property. Read this article about how to use it properly

good luck