CSS Vertical alignment does not work with float

Question

How can I use vertical-align as well as float in div properties? vertical-align works fine if I don't use float . But if I use float then this will not work. It is important for me to use float:right for the last div.

I am trying to follow if you remove the float from all divs, then it will 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 the 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 by:

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

Read this article for Understanding Vertical Alignment

Answer 3

Vertical alignment does not work with floating elements. This is because float raises an element from the normal flow of a document. You can use other methods of vertical alignment, such as those based on transformation, display: table, absolute positioning, row height, js (maybe the last one) or even a plain old html table (maybe the first choice if the contents are actually tabular) . You will find that there is heated debate on this issue.

However, you can vertically align YOUR 3 divs:

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

Not sure why you need a fixed width, display: inline block and floating.