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

Question

I have a simple HTML structure (jsfiddle):
<li>
<div class="buttons">
<img src="done.png">
</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;
}

Answer 2

You have to specify some max-width with percentage:
<li>
<div class="buttons" style="max-width:10%;">
<img src="done.png">
</div>
<div class="owners" style="max-width:30%;">
Даня Абрамов и Саша Васильев
</div>
<div class="text" style="max-width:60%;">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
<!-- 10+30+60 = 100% -->

Answer 3

There is a very nice flexbox solution if you have the browser support:
/* flexbox additions */
ul li {
display: flex;
}
.buttons {
flex-shrink: 0;
}
.owners {
flex-shrink: 0;
margin-right: 6px;
}
/* original CSS (inline-block is technically no longer necessary) */
.buttons {
display: inline-block;
}
.owners {
display: inline-block;
}
.text {
display: inline-block;
}
/* the rest is visual styling */
ul li {
line-height: 1.5em;
padding: 12px 8px 12px 8px;
margin-bottom: 12px;
margin-top: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
font-size: 15px;
background-color: #DBEAFF;
min-height: 23px;
}
.buttons {
min-width: 13px;
vertical-align: top;
margin-top: 3px;
margin-bottom: -3px;
}
.buttons a {
padding: 13px 9px 5px 9px;
}
<ul>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a>
</div>
<div class="text">short text
</div>
</li>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a>
</div>
<div class="text">longer text longer text longer text longer text longer text longer text longer text longer text longer text
</div>
</li>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a> и <a>Саша Васильев</a>
</div>
<div class="text">
longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text
longer text longer text longer text longer text longer text longer text
</div>
</li>
<li>
<div class="buttons">
<img src="http://clstr.org/static/images/tick.png">
</div>
<div class="owners">
<a>Даня Абрамов</a> и <a>Саша Васильев</a>
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
</ul>

Answer 4

I think you need to set max-width with different display mode.
li {overflow:hidden;}
li div { float:left; }
.button{ max-width: 10%;}
.owners{ max-width: 20%;}
.text{ max-width: 70%;}
See the new result here
BTW, if you use inline-block, the owners part won't stay on top.
I modified the code to fit your requirement. :)
FYI, li {overflow:hidden;} is a way to make a container to encompass its floated children.