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;
}