Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here you go:</p> <p><a href="http://jsfiddle.net/jjordanca/jDTBs/8/" rel="nofollow">http://jsfiddle.net/jjordanca/jDTBs/8/</a></p> <p>Keep in mind that this will look okay on Chrome, but not in Firefox since the <code>img</code> elements will require <code>display: block;</code> in the CSS. Some minor other adjustments may need to be made.</p> <p>HTML:</p> <pre><code>&lt;article&gt; &lt;header&gt; &lt;div class="cover"&gt; &lt;img src="" alt="" /&gt; &lt;time datetime="2013-08"&gt;Aug 2013&lt;/time&gt; &lt;/div&gt; &lt;h1&gt;Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche&lt;/h1&gt; &lt;/header&gt; &lt;div class="row"&gt; &lt;div class="text"&gt; &lt;p&gt;Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.&lt;/p&gt; &lt;p&gt;Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.&lt;/p&gt; &lt;/div&gt; &lt;section class="related"&gt; &lt;figure&gt; &lt;img src="" alt="" /&gt; &lt;figcaption&gt;Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.&lt;/figcaption&gt; &lt;/figure&gt; &lt;/section&gt; &lt;/div&gt; &lt;/article&gt; </code></pre> <p>CSS:</p> <pre><code>article { position: relative; max-width: 480px; } figure { margin: 0em } img { border: 1px solid } .cover { width: 80px; text-align: center; font-size: 0.8em; } .cover { display: inline-block; margin: 0em 2em 1em 0em; } time { display: inline-block; width: 80px; text-align: center; } header { display: inline-block; width: 100px; float: left; } h1 { position: relative; width: 550px; margin-top: -180px; top: 50px; margin-left: 90px; padding-left: 10px; font-size: 1.6em; } .cover img { width: 80px; height: 120px; } .row { display: inline; position: relative; top: 110px; } .text { display: inline; position: relative; font-size: smaller; } .related { width: 200px; font-size: 0.8em; height: 100px; float: right; position: relative; left: 220px; top: -200px; } .related img { width: 200px; height: 100px; } * { border: 1px dotted #ccc } </code></pre> <p>The problem with the way the HTML is structured is that this design is extremely limited in its responsiveness. If you are able to change the HTML, the page can be made truly responsive.</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