Simple exercise to mockup Linkedin's miniprofile hover box. JSFiddle link: http://jsfiddle.net/gjy67g2g/

fiddle.css

.miniprofile {
    width: 450px;
    height: 150px;
    border: 1px solid #aaaaaa;
    position: relative; /* all other elements styled relative to this section's position */
    font-family: Arial;
}
.headshot {
    margin: 10px;
    float: left;
}

/* Section: Bio details */
.bio-box {
    float: left;
    margin: 10px;
}

.profile-name {
    font-size: 18px;
    margin: 0px;
    font-weight: bold;
}
.details {
    margin: 0px;
}

.title, .location {
    margin: 0px; /* additional margin setting to address dl element's default style */
    line-height: 1.4;
}

/* Section: More */
.more {
    clear: both;
    position: absolute;
    bottom: 0px;
}

/* styling for center align the links */
ol {
    width: 90%;
    display: table; /* table layout for rendering the links as a row that spreads out equally */
    table-layout: fixed;

}

ol > li {
    display: table-cell; /* each item as a table cell */
    border-right: 1px dashed #cccccc;
    text-align: center;
    font-size: 12px;
}
/* end styling */

/* styling for left align the links */
/* ol {
    display: inline;
    float: left;  
}

ol > li {
    display: inline;
    border-right: 1px dashed #cccccc;
    text-align: left;
    font-size: 12px;
    padding-left: 40px;
    padding-right: 40px;
}

ol > li:first-child {
    padding-left: 0px;
} */
/* end styling */

ol > li:last-child {
    border: none;
}

/* Close Button */
.close {
    position: absolute;
    top: 5px;
    right: 10px;
    border: 1px solid #eeeeee;
    padding: 3px;
}

fiddle.html

<div class="miniprofile">
    <figure class="headshot">
        <img src="http://dummyimage.com/90x90/000/fff.png" />
    </figure>
    <section class="bio-box">
        <dl class="details"> <dt class="profile-name">FirstName LastName</dt>

            <dd class="title">Title at Company</dd>
            <dd class="location">Location</dd>
        </dl>
    </section>
    <section class="more">
        <ol class="links">
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </section>
    <span class="close">x</span>
</div>

fiddle.js

fiddle.manifest

name: miniprofile - interview question
description: A simple exercise to build a mockup of linkedin miniprofile hoverbox.
authors:
  - Kesava Mallela
normalize_css: no
lang_css: SCSS

http://jsfiddle.net/gjy67g2g/