CSS vertically align floating divs

Question

I have a div (#wrapper) containing 2 divs standing side by side.

I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy!

Hope someone can help.

http://cssdesk.com/LWFhW

HTML:

<div id="wrapper">   <div id="left-div">     <ul>       <li>One</li>       <li>Two</li>     </ul>   </div>     <div id="right-div">     Here some text...   </div> </div> 

CSS:

#wrapper{   width:400px;   float:left;   height:auto;   border:1px solid purple;}  #left-div{   width:40px;   border:1px solid blue;   float:left;}  #right-div{   width:350px;   border:1px solid red;   float:left;}  ul{   list-style-type: none;   padding:0;   margin:0;} 

Answer 1

You have no luck with floated elements. They don't obey vertical-align,

you need, display:inline-block instead:

http://cssdesk.com/2VMg8

BEWARE

---

Be careful with display: inline-block; as it interpretes the white-space between the elements as real white-space. It does not ignores it like display: block does.

I recommend this:

Set the font-size of the containing element to 0 (zero) and reset the font-size to your needed value in the elements like so

ul {     margin: 0;     padding: 0;     list-style: none;     font-size: 0; } ul > li {     font-size: 12px; } 

See a demonstration here: http://codepen.io/HerrSerker/pen/mslay

---

CSS

#wrapper{   width:400px;   height:auto;   border:1px solid green;   vertical-align: middle;   font-size: 0; }  #left-div{   width:40px;   border:1px solid blue;   display: inline-block;   font-size: initial;   /* IE 7 hack */   *zoom:1;   *display: inline;   vertical-align: middle; }  #right-div{   width:336px;   border:1px solid red;   display: inline-block;     font-size: initial;   /* IE 7 hack */   *zoom:1;   *display: inline;   vertical-align: middle; }    

Answer 2

You can do this quite easily with display table and display table-cell.

#wrapper {     width: 400px;     float: left;     height: auto;     display: table;     border: 1px solid green; }  #right-div {     width: 356px;     border: 1px solid red;     display: table-cell;     vertical-align: middle; } 

EDIT: Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg

ANOTHER EDIT: Use Flexbox. This will work but it's pretty outdated - http://www.cssdesk.com/davf5

#wrapper {     display: flex;     align-items: center;     border:1px solid green; }  #left-div {     border:1px solid blue; }  #right-div {     border:1px solid red; }