floating that breaks automatically

Question

I'm having some lines of text on the left hand side of my webpage and want to mark some lines by different colors using bars on the right hand side of the web page.

Essentially, the layout should look something like this: the position of the bars correspond to a given line range.

I tried to model this with css see this fiddle:

// html
<ul>
     <li style="top: 1em; height: 4em; background: brown;">1</li>
     <li style="top: 2em; height: 2em; background: red;">2</li>
     <li style="top: 3em; height: 3em; background: green;">3</li>
     <li style="top: 5em; height: 1em; background: blue; clear: left;">4</li>
</ul>

// css
li {
    list-style: none;
    display: inline-block;
    position: relative;
}

However the last bar (the blue one) never wraps to a new "line" but is just appended to the right. Is there any possibility to solve this in css?

Answer 1

Depending on your requirements..you can use absolute positioning:

Demo Fiddle

<ul>
    <li style="top: 1em; height: 4em; background: brown;left:1em;">1</li>
    <li style="top: 2em; height: 2em; background: red;left:2em;">2</li>
    <li style="top: 3em; height: 3em; background: green;left:3em;">3</li>
    <li style="top: 5em; height: 1em; background: blue;left:1em;">4</li>
</ul>    

nb. although -take your styles out of being inline!

The above fiddle uses nth-child, which you can use to perform rudimentary pattern matching if these elements follow some sort of predictable ordering.

Or you can use CSS columns depending on your requirements...if the elements appear in dedicated vertical 'lanes'

Note that without using one of the above, you will need to resort to either your own JS for layout management or a pre-existing library like masonry or isotope as vanilla CSS and HTML does not allow for vertically nested row ordering of elements.