div wrapper does not expand to accommodate text in css

Question

I have some description text which is part of a paragraph but the wrapper box doesnt adjust in size to accomodate the text. I have tried height:auto; but it doesnt seem to do much.

If possible please show me an example with and without scrollbars. My main problem is that i cannot get the grey box to expand. If i were to have scroll bars i would want them on the p.desc.

Here is my 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;
}

I think this may be a possible duplicate of [CSS - position absolute - container height problem](http://stackoverflow.com/questions/7321281/css-position-absolute-container-height-problem). The `position: absolute` on your `.team-details` div causes this issue. — Jeroen, Aug 04 '13 at 15:55
@PriceCheaperton Sorry Price I am afraid it is covered by the post mentioned by Jeroen. Read the section by Steven Xu. Here is a suggestion for how to fix it http://jsfiddle.net/XxDFb/33/ — RiggsFolly, Aug 04 '13 at 16:29

score 1 · Accepted Answer · answered Aug 04 '13 at 16:24

It does look like a position: absolute problem to me. Because .team-details is absolute, the parent doesn't have control over it anymore. I put this Fiddle together.

I changed .team-member-photo to .team-member-photo-social and moved the social links to live there. Next, I removed position: absolute and the styles that were attached to it.

From here the two divs can either be display: inline-block to allow for them to sit next to each and still have some margin, or float: left. Floated elements in the parent will cause a height issue, but I've added a class .cf (clearfix) to extend the height of the parent to end of the children.

I went with the float because some browsers (IE7 and below) won't read inline-block

div wrapper does not expand to accommodate text in css

1 Answers1