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


Tags: html,css-float,css

Problem :

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:

enter image description here

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

enter image description here

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

enter image description here

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)?



Solution :

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

    CSS Howto..

    How to place object in relation to window browser in css/html?

    How can I use Modernizr to get border-radius working in IE8?

    How to add a hiding delay to Full CSS Dropdown Vertical Menu

    How to make in CSS an overlay over an image?

    How to properly use css will-change property?

    How can I edit a web part's .css file on the fly in MOSS 2007?

    How to make the footer stick to the bottom?

    How to style default confirm box with only css?

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    how to gap a list in half

    how to access the class css properties from an attribute directive associated with the same element

    How to fill Frameless grid dynamically?

    How do I set the background-image property to a linear gradient using jQuery's css method?

    CSS form with side by side fields…how to align the labels and fields vertically?

    Dynamically loaded thumbnail image shows other thumbnails full size image instead of its own (using javascript hover over effect)

    How to import css from libraries via postCSS?

    How to include css and jquery in joomla component

    CSS- how to prevent the original title info to be displayed

    How can I select this element?

    How can I fix my CSS code to work with IE (where it shows scroll bars)?

    How to display thumbnail in dropdown CSS list along with other styling of text

    Showing divs in th on the same line

    How to get element by its partial class name CSS

    How can my css div with the display flex property be alignd to the right when it's wrapping?

    How to always make page content appear beneath navigation bar?

    How to inline elements with CSS

    how can resize dynamically the logo of the header?

    How can I disable inherit in CSS?

    How to provide some space between two lines of same text in css

    How to get global selector inside emulated view encapsulation (CSS / Angular2)