Databases
StackOverflow2013
Postsdbo
POTwo column list without two lists/wrappers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwo column list without two lists/wrappers
    text
    copied!<p>I am hoping to find a way to create a simple two-column list with variable height elements without using two wrapper elements for the columns, or any javascript.</p> <p><a href="https://stackoverflow.com/a/16821155/2026098">https://stackoverflow.com/a/16821155/2026098</a> mentions that floating odd elements to the left and even elements to the right might do the trick, but it seems to fail when the elements' heights are too variable.</p> <pre><code>&lt;div class="two-column-list"&gt; &lt;div class="element odd"&gt;A few words&lt;/div&gt; &lt;div class="element even"&gt;A few sentences&lt;/div&gt; &lt;div class="element odd"&gt;Many paragraphs&lt;/div&gt; &lt;div class="element even"&gt;One sentence&lt;/div&gt; &lt;div class="element odd"&gt;Many paragraphs&lt;/div&gt; &lt;/div&gt; .element.odd { float: left; } .element.even { float: right; } </code></pre> <p>See <strong><a href="http://jsfiddle.net/PF62T/3/" rel="nofollow noreferrer">http://jsfiddle.net/PF62T/3/</a></strong>. </p> <p>The gray boxes are odd and red ones are even. When making one of the odd boxes not high enough, the last of the even (red boxes), even though floated right, seems to want to occupy the space available on the left. Is there any way I can force the boxes to always stick to the left or right edge, no matter their height?</p> <p>I don't want to use CSS3 columns because I need to support IE8+. I am using angular so I can easily add different classes for odd and even elements, so this isn't a problem, either.</p> <p>I realise that using two wrappers would be the most solid solution, but I get the feeling the answer is out there somewhere :P My main reason for not wanting wrapper elements is that I need to show all the elements in a single column on mobile, in which case the wrappers would mess up their order.</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