content goes out of bound

I am designing a page which lists several books. I am in trouble that content sometimes go out of book-info box, say a book's title is extremely long and go beyond 140px height. I wonder what's the best solution to this? Below is the sample of my code.

//css
.book-data{height: 140px; width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; widdth: 300px;}

//html
<div class="book-data"开发者_如何学运维>
    <div class="book-image"></div>
    <div class="book-info">content</div>
</div>

<div class="book-data">
    <div class="book-image"></div>
    <div class="book-info">content</div>
</div>

simple as: overflow: hidden

http://jsfiddle.net/seler/pyseH/

If you let the book-data div keep it's height to auto; than your text can wrap around and despite the float. using clear both property will prevent the book-data div to collapse when yyou don't set it's height. Try this i am sure it will work;

//css
.book-data{width: 500px};
.book-image{float: left; width: 200px;}
.book-info{float: left; widdth: 300px;}
.clear {clear:both;}
//html
<div class="book-data">
    <div class="book-image"></div>
    <div class="book-info">content</div>
    <div class='clear'></div>
</div>

<div class="book-data">
    <div class="book-image"></div>
    <div class="book-info">content</div>
    <div class='clear'></div>
</div>