содержание выходит за рамки

Question

Я создаю страницу, в которой перечислены несколько книг. У меня проблемы с тем, что контент иногда выходит за рамки информации о книге, например, название книги очень длинное и выходит за рамки 140 пикселей. Интересно, что является лучшим решением для этого? Ниже приведен пример моего кода.

//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>

Answer 1

просто как: overflow: hidden

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

Answer 2

Если вы позволите div-данным book держать его высоту автоматически;чем ваш текст может обернуться и, несмотря на плавающее.использование свойства clear both предотвратит сворачивание div book-data, если вы не установите его высоту.Попробуйте это, я уверен, что это будет работать;

//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>