0

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: Goal

Community
  • 1
  • 1
Lyth
  • 2,171
  • 2
  • 29
  • 37
  • Could you perhaps draw a picture of what your desired goal is? I tried to use `position: absolute; right: 0; top: 0;` on the `.related` class, but that seems to cause the `section` element to overlap the `h1` title. Surely this is not what you intend? – Jake Jordan Aug 25 '13 at 09:09
  • @JakeJordan sorry, there should also be a `position: relative` on `.row` to make absolute positioning work as planned. – Lyth Aug 25 '13 at 09:13
  • @JakeJordan updated the question, picture provided. – Lyth Aug 25 '13 at 09:21

3 Answers3

0
<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>
Yudho Ahmad Diponegoro
  • 198
  • 2
  • 14
  • This way you clear the floats. I want to keep the `.cover` float so the text below flowed around it. – Lyth Aug 25 '13 at 09:15
0

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.

Jake Jordan
  • 311
  • 1
  • 6
  • That feels like some sort of magic :) Unfortunately, you still have a dependency on text height. I just added more text and `.related` went down: http://jsfiddle.net/cm6SG/1/ To be more clear: I use media queries for adaptation, and this example is already a layout under a max-width query. How would you propose to change the layout for better responsiveness? – Lyth Aug 26 '13 at 18:16
  • I'm going to add a separate answer so that your comment still makes sense in relation to the answer above. It may be important to somebody in the future to be able to see the path that lead us elsewhere. – Jake Jordan Sep 09 '13 at 00:58
0

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
}
Jake Jordan
  • 311
  • 1
  • 6
  • I tried moving related content above text, but then in smaller window it comes before text, just as your solution. That was the reason why I moved related below the text. – Lyth Sep 10 '13 at 08:33
  • Would you please submit another picture of how you'd like the responsive layout to look, this time for a smaller window? – Jake Jordan Sep 12 '13 at 07:46
  • Like this: http://oi41.tinypic.com/23tmis5.jpg . I just don't want to accent on it, except for the fact that it imposes a restriction on placing related content below the text. Actual styling goes in media-query for the specified max-width. – Lyth Sep 12 '13 at 09:53
  • Then you'll need to add some additional styling in your media query. See http://jsfiddle.net/jjordanca/jDTBs/11/ to figure out what you'll need to do. If you have a question about what you need to change for the media query, let me know and I'll point out specifics for you :) – Jake Jordan Sep 12 '13 at 20:23
  • Just like any absolute positioning solution, this one has its drawbacks: it overlaps everything else; e.g.: http://jsfiddle.net/NJavn/1/ . However, I'll accept your answer, because I didn't mention outer context for the layout. – Lyth Sep 13 '13 at 12:32
  • I don't want to leave you hanging! How's this (http://jsfiddle.net/jjordanca/jDTBs/12/) for a screen view, and how's this (http://jsfiddle.net/jjordanca/jDTBs/15/) for non-overlapping absolutely-positioned for your media query? – Jake Jordan Sep 13 '13 at 21:04
  • Never mind :) I'm already suspecting this layout is impossible with current "float" definition. Thank you for the efforts, I'm very impressed with how you could move related below everything, but still: http://jsfiddle.net/DM2ru/ - note how "related" goes below footer and does not stay within "article". – Lyth Sep 14 '13 at 13:15