I am encountering an issue where the wrapper box does not adjust in size to fit the paragraph text. I attempted using height:auto;, but it did not resolve the problem.
If possible, could you provide examples with and without scrollbars? My primary concern is that the grey box does not expand properly. If scroll bars are necessary, I would prefer them to be on the p.desc.
You can view my jsfiddle here: 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><strong>CSS</strong></p>
<pre><code>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;
}