CSS Vertical align does not work with float

Question

How can I use the vertical-align as well as float in the div properties? The vertical-align works fine if I do not use the float. But if I use the float, then it does not work. It is important for me to use the float:right for the last div.

I am trying following, if you remove the float from all div's then it would work fine:

<div class="wrap">     <div class="left">First div, float left,  has more text.</div>     <div class="left2">Second div, float left </div>     <div class="right">Third div, float right</div> </div> 

CSS:

.wrap{     width: 500px;     overflow:hidden;         background: pink; }  .left {     width: 150px;            margin-right: 10px;     background: yellow;       float:left;     vertical-align: middle;       display:inline-block  }  .left2 {     width: 150px;         margin-right: 10px;     background: aqua;     float:left;     vertical-align: middle;        display:inline-block }  .right{     width: 150px;     background: orange;     float:right;     vertical-align: middle;     display:inline-block } 

JSFiddle

Answer 1

You need to set line-height.

<div style="border: 1px solid red;"> <span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span> <span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span> <div style="clear: both;"></div> 

http://jsfiddle.net/VBR5J/

Answer 2

Edited:

The vertical-align CSS property specifies the vertical alignment of an inline, inline-block or table-cell element.

Read this article for Understanding vertical-align