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; 
}