How to stop DIV from dropping to next line when content too wide

Question

I have an issue with expanding divs wrapping to the next line. Basically I have a repeating DIV which is generated on the fly. The Div contains a product image, Quantity, Title and Price. The issue is that the title can be a varying length and so the title div must be able to expand onto multiple lines and the other divs should be able to re-arrange to match. The page must work on a small screen.

Please see the following image. The heights with question marks are not known as they could potentially expand with the content. If the title does expand onto multiple lines, the image should stay vertically aligned in the centre.

I've added a jsfiddle where 1 of the titles is too long and needs to expand. You can see it has been pushed below the DIV beneath. I have tried adding a max-width: 150px; to the div containing the expanding text, however, when this expands to multiple lines, it pushes the price field off the bottom so it cannot be seen.

I have tried using float, however, this didn't produce the desired outcome.

body {
  width: 300px;
}
.productbox {
  height: 50px;
  color: #555;
  background-color: #FFF;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 3px 6px 9px;
  vertical-align: middle;
  text-align: left;
  position: relative;
  margin-right: 20px;
  margin-top: 20px;
}
.productbox>.productbox-icon {
  border-radius: 50%;
  margin: auto;
  display: inline-block;
  vertical-align: top;
}
.productbox>.productbox-data {
  display: inline-block;
  border-width: 0;
  border-top-width: 0;
  font-size: 13px;
  text-align: left;
  line-height: 21px;
  min-width: 130px;
  padding-left: 8px;
  position: relative;
  top: 0;
}
.productbox>.productbox-data>.productbox-data-number {
  display: block;
  font-size: 22px;
  margin: 2px 0 4px;
  position: relative;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
}
.productbox .productbox-content {
  color: #7B7A7A;
  /*
				max-width: 150px;
			*/
  font-size: 10px;
}
.nailthumb-image {
  border-radius: 50px;
}

<div class="productbox">
  <div class="productbox-icon">
    <div class="nailthumb-container square">
      <img class="nailthumb-image" src="http://www.toeflgoanywhere.org/sites/default/files/styles/original/public/carousel/thumbs/basic-thumb2-hover.png?itok=f-yHa-XL">
    </div>
  </div>
  <div class="productbox-data">
    <span class="productbox-data-number">26</span>
    <div class="productbox-content">Short amount of text.</div>
    <div class="value">£9.99</div>
  </div>
</div>
<div class="productbox">
  <div class="productbox-icon">
    <div class="nailthumb-container square">
      <img class="nailthumb-image" src="https://discourse-cdn.global.ssl.fastly.net/meteor/images/emoji/emoji_one/smile.png?v=0">
    </div>
  </div>
  <div class="productbox-data">
    <span class="productbox-data-number">26</span>
    <div class="productbox-content">The text in this box is too long to fit here. Don't you think?</div>
    <div class="value">£9.99</div>
  </div>
</div>
<div class="productbox">
  <div class="productbox-icon">
    <div class="nailthumb-container square">
      <img class="nailthumb-image" src="http://images.ddccdn.com/answers/library/img/avatar/40-m.png">
    </div>
  </div>
  <div class="productbox-data">
    <span class="productbox-data-number">26</span>
    <div class="productbox-content">Another short amount of text</div>
    <div class="value">£9.99</div>
  </div>
</div>

Please let me know if you're able to help.

Thanks

Answer 1

If you use word-wrap: break-word in conjunction with your max-width property, This will allow the text to wrap in place instead of pushing below the image.

I also added a line-height: to make the rest fit. Space is going to be an issue regardless, but this should keep it in place for you. If absolutely necessary you could add an overflow: scroll to it.

https://jsfiddle.net/rLtf3je3/10/

edit: forgot to save the JSFiddle before I linked it :)

Based on Cruiser's answer, word-wrap isn't really doing anything - setting the line-height seems to be enough in this case.

Answer 2

The problem is that you're forcing the height of your productbox to be 50px. Remove that line and add line-height:1em; to your productbox-content. Finally, use max-width on your productbox-content class.

http://jsfiddle.net/b359Lh6g/

.productbox-content{
    line-height:1em;
    max-width:150px;
}