Tricky div stacking

Question

I have three <div>s, A, B, and C. They are all lines of text. The basic layout is:

aaaaaaaaaaaaaa     ccccccccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbbbbbbbb

When the window is opened fully, the cccccccccccc can be kerned (i.e can fit) above the bbbbbbbbb and therefore I want it to do so, as illustrated above.

However, when the window is reduced in size such that either A and C can't fit on the same line, I want ccccccccccc to move below bbbbbbbbb, like this:

aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccccccc

Therefore, I somehow need to make the default position of C to the right of A, but to make C move below B when there isn't enough space to accommodate C in its full length (and I don't want any line-wrapping).

Placing A and B together in a containing <div> and having C follow that <div> simply doesn't work, as I want C to be next to A, on the same line, in its default positioning; if I wrapped A and B into a dedicated <div> container, I'd end up with:

aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb   ccccccccccccccccccccccccc

...and that's not what I want. (I'd also likely end up with text-line wrapping of B and C, and I'm trying to avoid that.)

How can this be most efficiently accomplished?

You should look into Bootstrap's grid system. This allows you to specify what layout you'd like for each screen size. — ChaseHardin, Oct 17 '15 at 03:48

score 2 · Answer 1 · answered Oct 18 '15 at 02:05

I've Solved it...no JQuery required, just judicious styling:

<!DOCTYPE html>
<div style="float:left">AAAAAAAAAAAAAAA&nbsp;&nbsp;&nbsp;</div>
<div style="float:left; width:100%">BBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div style="display:inline-block; vertical-align:top">CCCCCCCCCCCCCCCCCCCCCCCCCCC</div>

See it in action here: https://jsfiddle.net/TomJS/wj44qqe4/

Tricky div stacking

1 Answers1