Advice regarding wrapping text inside a div - html

Question

I'm creating a contact card style layout, with a photo and text next to it, as demonstrated in this fiddle here:
http://jsfiddle.net/L7pWv/5/
HTML:
<div class="container">
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name</span>
<span class="description">This is some really long text that should wrap nicely when things all work OK</span>
</div>
<div class="clearfix"></div>
</div>
<div class="contact-card">
<div class="photo"></div>
<div class="details">
<span class="name">My Name 2</span>
<span class="description">Short description</span>
</div>
<div class="clearfix"></div>
</div>
</div>
CSS:
.container {
width: 350px;
}
.contact-card {
background-color: whitesmoke;
border-bottom: 1px solid #ddd;
white-space: nowrap;
}
.contact-card .photo {
float: left;
width: 80px;
height: 50px;
background-color: tan;
margin: 10px;
}
.contact-card .details {
display: inline-block;
margin: 10px 0;
}
.contact-card .name {
display: block;
font-weight: bold;
line-height: 1em;
}
.contact-card .description {
display: block;
font-size: 0.8em;
color: silver;
line-height: 1em;
white-space: normal;
}
.clearfix {
clear: both;
}
As you can see from running the fiddle, when the text is really long, it does wrap eventually, based upon my white-space setting, but it exceeds the size of the contact card before doing so. I could put a right margin of 90px on the "description" class to keep the text within the bounds (which works), but I can't help but feel this is wrong. I'd like it to naturally want to stay within its parent's bounds, but can't think of the best way to achieve that. Any ideas?

Answer 1

Consider making these changes:
.contact-card {
display: inline-block;
}
.contact-card .details {
display: block;
}
This will keep each card displaying inline while keeping the text of the card inside the block without specifying a margin.

Answer 2

Kind of a tricky one, as I don't know what uses you'll be putting this in, but I'd probably do it with these changes.
Get rid of
<div class="clearfix"></div>
It's not needed if you make a simple addition like:
.contact-card {
float:left;
}
Then change .contact-card .details to this:
.contact-card .details {
padding: 10px 0;
}
That should give you the "The width of the details element should really be dictated by the parent." behaviour you're after
http://jsfiddle.net/L7pWv/6/

Answer 3

I suggest just don't use inline-block for this. You don't want the .detail element overflow on it's parent element. Because you already floated your photo, you can just place the element next to the photo element.
Note that you should use padding when you want space inside the element and use margin when you want it outside of the element.
There is no need for white-space: nowrap; as you floated the photo.
jsFiddle
The only thing i changed is the use of padding and margin and removed the white-space .

Answer 4

CSS:
.contact-card .details {
display: inline-block;
margin: 10px 0;
width:70%;
}
Fiddle: http://jsfiddle.net/L7pWv/2/