Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Force a text to wrap depending on next element

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #151910
    vaielab
    Participant

    I have this code:

    Html:

    <div>
        <h1>long string </h1>
        <div class="button">
            <a>button1</a>
            <a>button2</a>
            <a>buttonX</a>
        </div>
    </div>
    

    Css:

    h1 {
        float:left;
        vertical-align:top;
    }
    .button {
        float:right;
    }
    
    .button a {
        display:inline-block;
        width:100px;
        background-color:red;
        vertical-align:top;
        margin:5px;
    }
    

    Here a jsFiddle of this: http://jsfiddle.net/a88rB/1/

    For keeping thing simple, I only kept the minimum tags.

    At the moment, both (the h1 and div with the “buttons”) are on a single line. But if the h1 because a true long string like

    <h1>long string long string long string long string long string long string long string long string long string long string </h1>
    

    http://jsfiddle.net/a88rB/2/

    The button are push under the h1.

    I do not always know the number of button I will have.

    Is there a way to set the width of div.button to it’s content, and set the width of h1 to the rest of the parent so that if the h1 is long enough, it will text-wrap and leave the button at the top?

    PS. I do not need support for ie7

    Thank you.

    #151911
    Paulie_D
    Moderator

    Possibly but not with CSS

    If it’s possible, it would required JS.

    There might be options if you can change the HTML structure.

    #151914
    Paulie_D
    Moderator

    Ah, I see you have your answer on Stack Overflow.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.