How to vertically align a DIV next to an image?

Answer 1

Use display: inline-block.

#details { 
    display: inline-block; 
    vertical-align:middle;
    border:solid black 1px; 
    width: 300px; 
 } 
.photo { 
   display: inline-block; 
   vertical-align:middle;
   width: 300px; 
   height: 300px; 
   border: 1px solid #d1c7ac; 
}

Answer 2

basically what I would do is:If you can specify a fixed height (corresponding to your image height) for your outer container(#personalInfo div)..do it! then I will set this #personalInfo position to relative. After that I will set your #details div position to absolute so that I can shift it to 50% from top and i would set margin-top:-yy where yy is half the height of the #details to offset the item up:

give a look here

Answer 3

try this

#personalInfo{
   float: left;
   margin-top: 5%; 
   margin-left: 2%;
   font-size: 1.3em;
}
img{float:left;border:1px solid #333}
#details{float:left;padding:10px 0 10px 0}

working example: http://jsfiddle.net/bingjie2680/DSmKu/

the idea is to float left both the image and details. by doing so two elements will have the same height. and then you can make the detail div padding top and bottom some space.