Responsive floats mess with classic floats - html

Question

I'm trying to mix "traditional" float usage for floating text around element with some adataptiveness for different resolutions. Fiddle: http://jsfiddle.net/jDTBs/5/
<article>
<header>
<div class="cover">...image...</div>
<h1>title</h1>
</header>
<div class="row">
<div class="text">some long text</div>
<section class="related">related content</section>
</div>
</article>
Responsiveness here comes in flavour of moving related content below the text. Currently .related cannot move higher than end of .text, because .text 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.
Common approach is to use float on .text, but it interferes with text floating around .cover. 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 overflow or display properties in .text make text block jump away from floating .cover.
The closest I could get to is to use position: absolute on .related with right:0px;top:0px. This gives the positioning I want, but produces a CSS-unsolvable problem: related content will go below end of article.
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.
Thsi is something I'd like to achieve:

Answer 1

Here's an example of how the HTML and CSS could be changed to yield a beautifully responsive layout. I've added more paragraphs to the HTML so that it's easy to see that the amount of text does not affect the image position. Perhaps the biggest caveat here is that figcaption is rendered really strangely in relation to figure (I'm guessing that has something to do with the standard's definition of the default stylesheet for those elements), so unless this possibly changes in the future, you'll need to specify enough margin underneath the figure to encompass the caption.
http://jsfiddle.net/jjordanca/jDTBs/10/
HTML:
<article>
<figure class="cover">
<img src="" alt="" />
<time datetime="2013-08">Aug 2013</time>
</figure>
<header>
<h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
</header>
<div class="row">
<figure class="related">
<img src="" alt="" />
<figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
</figure>
<div class="text">
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</article>
CSS:
* {padding: 0; margin: 0;}
article {
position: relative;
}
img {
border: 1px solid black;
}
.cover {
width: 80px;
text-align: center;
font-size: 0.8em;
display: inline-block;
float: left;
margin: 0 20px 10px 0;
}
time {
display: inline-block;
width: 80px;
text-align: center;
}
header {
margin: 20px 0 0 0;
}
h1 {
position: relative;
padding-left: 10px;
font-size: 1.6em;
}
.cover img {
width: 80px;
height: 120px;
}
.row {
display: inline;
position: relative;
}
.text {
display: inline;
position: relative;
font-size: smaller;
}
.related {
display: inline-block;
width: 200px;
font-size: 0.8em;
height: 100px;
float: right;
margin: 25px 0 50px 20px;
}
.figcaption {
display: inline-block;
float: right;
}
.related img {
width: 200px;
height: 100px;
}
* {
border: 1px dotted #ccc
}

Answer 2

<article>
<header>
<div class="cover">...image...</div>
<h1>title</h1>
</header>
<div style="clear:both"></div>
<div class="row">
<div style="float:left" class="text">some long text</div>
<section class="related">related content</section>
</div>
<div style="clear:both"></div>
</article>

Answer 3

Here you go:
http://jsfiddle.net/jjordanca/jDTBs/8/
Keep in mind that this will look okay on Chrome, but not in Firefox since the img elements will require display: block; in the CSS. Some minor other adjustments may need to be made.
HTML:
<article>
<header>
<div class="cover">
<img src="" alt="" />
<time datetime="2013-08">Aug 2013</time>
</div>
<h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
</header>
<div class="row">
<div class="text">
<p>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.</p>
<p>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.</p>
</div>
<section class="related">
<figure>
<img src="" alt="" />
<figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
</figure>
</section>
</div>
</article>
CSS:
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
}
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.