Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Name/Date (aside) comes before the paragraph in this version, but it allows for a percentage width on the aside. It can also be resized to virtually any size without any rendering issues (unless the width of a column is less than the longest word, in which case you probably have a much bigger issue to deal with).</p> <p>The CSS:</p> <pre><code>&lt;style&gt; /* HTML Block Elements - For Older Browsers */ article, aside, footer, header, nav, section { display:block; } /* Basic Structure - DONT EDIT */ .transaction-history-list li { overflow:hidden; } .transaction-history-list li &gt; aside { float:left; /* Uncomment for equal height (background) Buggy in IE7 padding-bottom:10000px; margin-bottom:-10000px; */ overflow:hidden; } .transaction-history-list li &gt; div { /* Uncomment for equal height (background) Buggy in IE7 padding-bottom:10000px; margin-bottom:-10000px; */ overflow:hidden; } /* Width of Aside */ .transaction-history-list li &gt; aside { width:20%; /* Width of aside */ } .transaction-history-list li &gt; div { margin-left:20%; /* Width of aside */ } /* Misc Styles */ .transaction-history-list { list-style:none; border-bottom:1px solid #ccc; padding:0 0 5px 0; margin:0; } .transaction-history-list li { padding:5px 0 0 0; margin:5px 0 0 0; border-top: 1px solid #ccc; } .transaction-history-list li &gt; div { /* Right column */ padding-left:10px; } .transaction-history-list li &gt; aside { /* Left column */ } .transaction-history-list time { display:block; color: #999; font-size: .8em; margin:2px 0 0 0; } .transaction-history-list p { display:block; color: #333; font-family:sans-serif; font-size: .8em; margin:4px 0 0 0; } &lt;/style&gt; </code></pre> <p>In the HEAD (to enable html5 elements in older IE):</p> <pre><code>&lt;!--[if lt IE 9]&gt; &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; </code></pre> <p>And in the BODY:</p> <pre><code>&lt;ol class="transaction-history-list"&gt; &lt;li&gt; &lt;aside&gt; &lt;span&gt;Some User&lt;/span&gt; &lt;time&gt;5/25/2011 10:52 PM&lt;/time&gt; &lt;/aside&gt; &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in tellus orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet lorem vitae nulla faucibus rutrum. Phasellus et tellus sit amet turpis feugiat bibendum nec laoreet urna. Etiam vitae leo elit, vel feugiat diam. Sed a augue urna. Nunc semper, nulla vel imperdiet tempor, ante enim dignissim dui, ut vehicula enim felis ut sem.&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;aside&gt; &lt;span&gt;Some User&lt;/span&gt; &lt;time&gt;5/25/2011 10:52 PM&lt;/time&gt; &lt;p&gt;This column also supports long content.&lt;/p&gt; &lt;/aside&gt; &lt;div&gt;Created in Starting Activity and assigned to Some User.&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;aside&gt; &lt;span&gt;Some User&lt;/span&gt; &lt;time&gt;5/25/2011 10:52 PM&lt;/time&gt; &lt;/aside&gt; &lt;div&gt;Created in Starting Activity and assigned to Some User.&lt;/div&gt; &lt;/li&gt; &lt;/ol&gt; </code></pre>
 

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