Databases
StackOverflow2013
Postsdbo
POResponsive floats mess with classic floats
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive floats mess with classic floats
    text
    copied!<p>I'm trying to mix "traditional" float usage for floating text around element with some adataptiveness for different resolutions. Fiddle: <a href="http://jsfiddle.net/jDTBs/5/" rel="nofollow noreferrer">http://jsfiddle.net/jDTBs/5/</a></p> <pre><code>&lt;article&gt; &lt;header&gt; &lt;div class="cover"&gt;...image...&lt;/div&gt; &lt;h1&gt;title&lt;/h1&gt; &lt;/header&gt; &lt;div class="row"&gt; &lt;div class="text"&gt;some long text&lt;/div&gt; &lt;section class="related"&gt;related content&lt;/section&gt; &lt;/div&gt; &lt;/article&gt; </code></pre> <p>Responsiveness here comes in flavour of moving related content below the text. Currently <code>.related</code> cannot move higher than end of <code>.text</code>, because <code>.text</code> is in normal flow. I tried to use relative positioning on float, but I don't know the height to offset it, so -100% does not work.</p> <p>Common approach is to use <code>float</code> on <code>.text</code>, but it interferes with text floating around <code>.cover</code>. I also tried moving related content above text, but then in smaller window it comes before text, which is undesirable. Also, any kind of interference with <code>overflow</code> or <code>display</code> properties in <code>.text</code> make text block jump away from floating <code>.cover</code>.</p> <p>The closest I could get to is to use <code>position: absolute</code> on <code>.related</code> with <code>right:0px;top:0px</code>. This gives the positioning I want, but produces a <a href="https://stackoverflow.com/questions/13545947/position-absolute-and-parent-height">CSS-unsolvable problem</a>: related content will go below end of <code>article</code>.</p> <p>So I'm stuck. Is there any way to mix the two approaches? Highest CSS support and any changes to layout are acceptable. Bootstrap CSS is also available, but does not help a tiny bit.</p> <p>Thsi is something I'd like to achieve: <img src="https://i.stack.imgur.com/fGqZ6.png" alt="Goal"></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