html - div ラッパーが css のテキストに合わせて展開されない

Question

段落の一部である説明テキストがありますが、ラッパー ボックスのサイズがテキストに合わせて調整されません。試してみheight:auto;ましたが、あまり効果がないようです。

可能であれば、スクロールバーがある場合とない場合の例を教えてください。私の主な問題は、灰色のボックスを展開できないことです。スクロール バーがあれば、p.desc.

これが私のjsfiddleです：http://jsfiddle.net/XxDFb/29/

HTML

    <div class="team-wrapper">
    <div class="team-member-photo">
        <img alt="pic" src="http://placehold.it/134x108">
    </div>
    <div class="team-member-social-network-links">  <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Twitter</a> / <a class="url" href="http://www.repeatpenguin.com" title="repeatpenguin.com" rel="me">Facebook</a>

    </div>
    <div class="team-details">
        <p class="name">Firstname Surname</p>
        <p class="job-title">Job title</p>
        <p class="email">Email Address</p>
        <p class="tel">112-123-1232</p>
        <p class="desc"><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis elementum neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non facilisis magna. Vestibulum mattis vitae lacus vitae hendrerit. Maecenas vel urna et quam egestas bibendum. Mauris aliquet tellus ante, sit amet malesuada urna tincidunt id. In dapibus erat vel metus aliquet rhoncus.</p><br />
<p>
Integer pharetra nunc id dapibus posuere. Aliquam auctor, felis id euismod dignissim, nulla diam condimentum dui, sit amet aliquam quam elit vel nisi. Ut erat ligula, eleifend vel facilisis vel, viverra ut dui. Suspendisse lacinia massa sed porttitor lacinia. Nunc vitae eros convallis dui dapibus aliquet. Donec cursus est eu dolor pulvinar eleifend. Nunc at sem et lorem tempus tincidunt eu ac nunc. Praesent scelerisque libero vel pharetra porttitor.</p>
        </p>
    </div>

</div>

CSS

div.team-wrapper {
    background-color:#dedede;
    padding:10px;
    position:relative;
    height:auto;

}
div.team-member-photo {
    width:135px;
    height:109px;
    padding-top:20px;
    padding-left:20px;
}
div.team-member-photo img {
    background: none repeat scroll 0 0 #F1F1EF;
    border: 1px solid #B2B4B2;
    padding: 8px;
}
div.team-member-social-network-links {
    width:135px;
    height:109px;
    padding-left:30px;
    padding-top:20px;
}
div.team-details {
    top: 7px;
    left: 200px;
    position: absolute;
    border:1px solid RED;
    width:560px;
    margin-top:20px;
    height:auto;
}
div.team-details p {
    margin:0;
    line-height:25px;
}
div.team-details p.name {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    color: #4F688E;
    font-weight:700;
    font-size:18px;
    text-transform:uppercase;
}
div.team-details p.job-title {
    color: #626362;
    font-weight:400;
    font-size:18px;
    font:italic 16px/18px Georgia, Palatino, "Times New Roman", Times, serif;
}
div.team-details p.email {
    text-shadow:0 1px 1px rgba(255, 255, 255, 0.8);
    color: #626362;
}

div.team-details p.tel {
    color: black;
    font-weight:400;
    font-size:18px;
    font:16px/18px Georgia, Palatino, "Times New Roman", Times, serif;
}

div.team-details p.desc {
    padding-top:40px;
}