McCuz McCuz - 6 months ago 9
HTML Question

Add child width to parent content

I wasnt sure exactly what to write as the title, but my jsfiddle should make everything very clear.

https://jsfiddle.net/1btr7mkq/

<div class="blabla">
Bla bla bla blalblabl bla bla bla bla bla
<div class="questionMark">?</div>
</div>


If I make the output window smaller, there's a sweet spot where the question mark falls into the 2nd line, but the blabla's stay in 1 line.

enter image description here

How do I avoid this interaction?
I see 2 possible solutions,
1st one having "reserved" width on the right side for the question mark. That way if text comes within 40ish pixels from the right edge, it will drop it down.

2nd, better solution would be without the reserved width on the right side. In this case, lines above the last line can use full width, and wont linebreak 40px before the end. In this case the page would have to "detect" that the question mark jumped lines, and add a blank line under it's own content.

I've tried a few things but couldn't get either of these to work as I wanted.

Answer

Just put the DIV with the question mark at the beginning of the container DIV. This will always put it in the upper right corner of the container:

<div class="blabla">
  <div class="questionMark">?</div>
  Bla bla bla blalblabl bla bla bla bla bla
</div>

https://jsfiddle.net/5cysbv5h/