How to vertically align a DIV next to an image?

Question

I have the following html code:

<div id="personalInfo">
    <img class="photo" alt="" src="...." />

    <div id="details">
        <p>
        <label class="label">Name:</label>
        <label class="detailsLabel"></label>
        </p>

        <p>
        <label class="label">Date of birth:</label>
        <label class="detailsLabel"></label>
        </p>

        <p>
        <label class="label">Employee id:</label>
        <label class="detailsLabel"></label>
        </p>

        <p>
        <label class="label">Status:</label>
        <label class="detailsLabel"></label>
        </p>
   </div>
</div>

and the following css:

#personalInfo     
{
   width: 35%;
   float: left;
   clear: left;
   margin-top: 5%; 
   margin-left: 2%;
   font-size: 1.3em;
}
#details { margin-left: 5%; } 
.photo { 
   vertical-align: middle; 
   width: 150px; 
   height: 150px; 
   float: left; 
   margin-left: 3%; 
   border: 1px solid #d1c7ac; }
.label { margin-top: 2%; margin-left: 5%; font-weight: bold; }
.detailsLabel { margin-top: 5%; margin-left: 0.5%; }

I need the 'details' div to be vertically aligned to middle relatively to the image. How can I accomplish that?

Thanks !!!

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

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.