Skip to main content
WolfShade
Legend
April 16, 2018
Answered

Force span to upper-right corner of h5 element

  • April 16, 2018
  • 2 replies
  • 1012 views

Hello, all,

How does one force a span to occupy the upper-right corner of a containing div, and force text inside the div to wrap around it?

I'm developing a blog for internal use, and I'm using a + to indicate to the user that clicking on the div will expand the title to include the full text of the post.  I'd like for it to stay in the upper-right corner.  If the title is way long (like 100+ characters), I want the + to stay in the corner and the text to line feed before it reaches the +.  How is this accomplished?


V/r,

^ _ ^

CORRECTION:  The span is contained within an H5 element, not a div as I originally reported.

    This topic has been closed for replies.
    Correct answer WolfShade

    Have you tried using margin and padding to move the + up to the top, and 'wrap' the text arround it.

    Very off topic, but this would be easy if all browsers supported css exclussions, (as I said very off topic, hope you don't mind ).


    I don't mind, at all.  I've never heard of css exclusions (I'm a database and back-end OOP guy), so I might learn something.

    Actually, I tripped across a solution.  It may not be THE solution, but it works.  I place the <span> BEFORE the text, and float: right; the span.  It appears, first, on the right at the top, then the text (which floats default, ie 'left'), which is on the same z-index, line breaks before it gets to the <span>. 

    As I stated, probably not the best way to do it, but it works, for me.

    Thank you for your suggestions.

    V/r,

    ^ _ ^

    2 replies

    mbk28
    Known Participant
    April 16, 2018

    if someone use an old version of IE, there is a message on my website saying, perhaps, it can't see the site

    pziecina
    Legend
    April 16, 2018

    The simplest way would be to float the span.

    If you are using flexbox, you could also align-content: flex-end

    WolfShade
    WolfShadeAuthor
    Legend
    April 16, 2018

    Hi, pziecina,

    I did try that.  But if I have something like so:

    <h5 style="width: 98%;">This is a really long title for a blog entry and it doesn't need to be this long but I'm testing something so please bear with me. <span style="float: right;">&plus;</span></h5>

    Then the &plus; just goes to the end of the text on the next line, and looks like:

    _______________________________________________________________

    | This is a really long title for a blog entry and it doesn't need to be this long      |

    | but I'm testing something so please bear with me.                                             + |

    Is there a way to force it to the top?

    V/r,

    ^ _ ^

    pziecina
    Legend
    April 16, 2018

    Have you tried using margin and padding to move the + up to the top, and 'wrap' the text arround it.

    Very off topic, but this would be easy if all browsers supported css exclussions, (as I said very off topic, hope you don't mind ).