Databases
StackOverflow2013
Postsdbo
POBumping floating blocks a line up or down
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBumping floating blocks a line up or down
    text
    copied!<p>I am in lack of better words to describe my problem, which prevents me from researching the issue properly. However, I can describe it.</p> <p>Below is my result so far. The elements in question will reside in a table-cell, in a table with a lot of data. The items in blue are the div-elements which I want to move horizontally, such that their left border shows the "value" of the element. In the example below, the value is shown in parentheses, in respect to the entire cells width. The width of the elements is fluid, as the elements will contain text of different lengths.</p> <p><img src="https://i.stack.imgur.com/GtZci.png" alt="enter image description here"></p> <p>(See image at <a href="https://i.stack.imgur.com/11Iy7.png" rel="nofollow noreferrer">http://i.stack.imgur.com/11Iy7.png</a>)</p> <p>This was obtained with the following code:</p> <pre><code>td.singleton {display: table-cell; } td.singleton &gt; div {display: inline-block; background-color: blue; clear: both; float:left} &lt;tr class="level2"&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td colspan="7" class="singleton"&gt; &lt;div style="margin-left: 12%"&gt;Item 1 (.12)&lt;/div&gt; &lt;div style="margin-left: 23%"&gt;Item 2 (.23)&lt;/div&gt; &lt;div style="margin-left: 40%"&gt;Item 3 (.40)&lt;/div&gt; &lt;div style="margin-left: 80%"&gt;Item 4 (.80)&lt;/div&gt; &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt; </code></pre> <p>Currently, the above works fine and the data is readable. However, I want the four "lines" compacted to two, as below:</p> <p><img src="https://i.stack.imgur.com/Xr7hd.png" alt="enter image description here"></p> <p>( See image at <a href="https://i.stack.imgur.com/l9Pyv.png" rel="nofollow noreferrer">http://i.stack.imgur.com/l9Pyv.png</a>)</p> <p>Here, the elements are drawn on the upper-most line, as long as they do not lie on top of a previous element; in this case, the element is "bumped down" a line. The generation of the html is done in Python, so as a last resort, it might be possible to determine which line to use manually instead of letting the browser decide.</p> <p>Now there is a two-fold question:</p> <ol> <li>How would you describe my problem with only a few words, so I can further investigate?</li> <li>Is this possible using css?</li> </ol> <p>Thank you in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload