Databases
StackOverflow2013
Postsdbo
POFloating images to their own "column" without divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFloating images to their own "column" without divs
    text
    copied!<p>I would like to recreate the look of the following page on my existing blog: <a href="http://jeff.klukas.net/bio/" rel="nofollow">http://jeff.klukas.net/bio/</a></p> <p>The hallmark here is that we have two columns, images on the left and text on the right without the text wrapping underneath the images. Also, the images appear at vertical positions which place them in context with the text.</p> <p>The current design uses Blueprint CSS with pairs of divs for each section of image and text. I'd like to create an adaptive design that crunches down to a single column for smaller browser widths, so the source (generated from Markdown) would look like:</p> <pre><code>&lt;img src=img1.png&gt; &lt;p&gt;First paragraph...&lt;/p&gt; &lt;img&gt; src=img2.png&gt; &lt;p&gt;Second paragraph...&lt;/p&gt; </code></pre> <p>Which would display on a narrow screen as:</p> <pre><code>------------ |img1 | ------------ First paragraph ------------ |img2 | ------------ Second paragraph </code></pre> <p>Or on a wide screen as:</p> <pre><code>------------ First paragraph... |img1 | more text more text ------------ more text more text more text more text more text more text more text more text. ------------ Second paragraph... |img1 | more text more text ------------ more text more text more text more text more text more text more text more text more text more text. </code></pre> <p>I can achieve most of what I want with the little I know of <code>@media</code> trickery, but I'm not sure if it's possible to achieve the wide-screen layout I want without messing with the html. Is this just a dream?</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