Vertically align floating DIVs

css, css-float, html, vertical-alignment

Solution

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

Problem

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?

Original source