AddressBook like Outlook

I w开发者_开发知识库ould like to implement a sort of AddressBook like the one in outlook as in the following picture

Can somebody help with markup and style for the address card?

---

I made a quick example for you: You can see it live here on jsFiddle.net.

HTML:

<div class="outl-add">
    <div class="outl-add-top">
       Duck, Daffy
    </div>
    <div class="outl-add-left-vert">
       &nbsp;
    </div>
    <div class="outl-add-right-info">
        <p class="info-top">
        <span class="user-name">Daffy Duck</span>
        <span>ACME International</span>
        <span>Manager</span>
        </p>
        <p class="address-info"></p>
        <span> +122323i9092<span class="grey-text">UIofcio</span>
        <p>daffy@acme.org</p>
        <p>666, 5th Avenue</p>
        <p>New York</p>
        <p>www.daffysite.com</p>
    </div>
</div>

CSS:

.outl-add
{
    width: 400px;
    border: 1px solid #000;
}

.outl-add-top
{
    height: 25px;
    background-color: orange;
}

.outl-add-left-vert
{
    float: left;
    height: 200px;
    width: 35px;
    background-color: #ccc;
}

.outl-add-right-info
{
    height: 200px;
    float; left;
    background-color: #eee;
}

p.info-top
{
    margin-bottom: 10px;
}

p.info-top span
{
    display: block;
}

.user-name
{
    font-weight: bold;
}

.grey-text
{
    color: #ccc;
}

Hope that helps you out some. If you have any questions about anything used here, ask them in comments or a new question relative to the problem you have :)