How to wrap lines in an inline-block with CSS?

Question

I have a simple HTML structure (jsfiddle):

<li>     <div class="buttons">         <a href="done"><img src="done.png"></a>     </div>     <div class="owners">         Даня Абрамов и Саша Васильев     </div>     <div class="text">         трали-вали трали-вали трали-вали трали-вали     </div> </li> 

buttons, owners and text have display: inline-block.

This looks fine when text is fairly small:

However, as the text grows, inline-block elements extend and eventually fall over the line:

This is ugly, and I would like to avoid that.
What I want to achieve instead is this:

When the text is too large to fit inside the element, I want it to be wrapped by lines.
I tried setting float: left on the elements, but couldn't get it working.

What's the proper way to do this with HTML and CSS (no tables)?

Answer 1

The exact result you desire can be achieved if you use floats instead of display: inline-block.

See: http://jsfiddle.net/thirtydot/CatuS/

li {     overflow: hidden; } .buttons, .owners {     float: left; } .text {     overflow: hidden;     padding-left: 4px; }