HTML-текст рядом с div без указания фиксированной ширины

Question

У меня есть несколько элементов div, вложенных в div. Я хочу, чтобы div #title-text находился рядом с изображением - в этом случае с использованием поплавка.

Проблема в том, что текст в div пробегает div, когда у него больше нет места в ширине, как вы можете видеть в this jsFiddle.

Я хочу использовать поплавки, потому что будет несколько плиток с использованием тех же классов, и эти плитки имеют разные размеры и изображения и т. Д. Также я не хочу, чтобы #title-text имел фиксированную ширину из-за использования нескольких фрагментов он и, следовательно, имеет разную ширину.

Вот HTML:

<div id="tile-wrapper"> 
    <div id="category-text"> 
     <p class="category-content">Smartphones/software</p> 
    </div>       
     <div id="tile-image"> 
      <a href="#"><img src="images/wp10.jpg" class="tile-image" name="title" /></a> 
     </div> 
     <div id="title-text"> 
      <a href="#" class="title-text">Placeholder Text placeholder text placeholder text placeholder text</a> 
     </div> 
    <div id="date-time-text"> 
     <p class="date-time">3 minutes ago.</p> 
    </div> 
</div> 

Answer 1

Итак, сначала я добавил отображение встроенных в классы как этот

.tile-image { 
margin: 0 auto; 
display:inline; 
} 

.title-text { 
margin: 0 5px 5px 0px; 
font-weight: 300; 
text-shadow: 1px 1px 3px rgba(0,0,0,.3); 
text-decoration: none; 
font-size: 22px; 
color: black; 
display:inline; 
} 

тогда я поставил ширину и выравнивание на # титульный текст

#title-text { 
float: left; 
margin-left: 5px; 
margin-bottom:10px; 
text-align:left; 
width:50%; 
} 

Answer 2

Я нашел ответ на свой вопрос с JQuery. Вот решение, если кто-то задается вопросом.

$(document).ready(function() { 
    var imageWidth = $('#tile-image').width(); 
    var titleTextWidth = $('#title-text').width(); 

    $('#title-text').width(imageWidth); 
    $('#tile-wrapper').width(imageWidth * 2 + 30); // +30 for margins. 

});