CODEWITHSUNDEEP
htmlcssword-wrap
Etienne
Etienne

Reputation: 177

Css force a text to wrap depending on next element

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

Upvotes: 0

Views: 347

Answers (1)

dezman
dezman

Reputation: 19358

Fiddle! You can rearrange your html so the buttons stay at the top:

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

And if you want the <h1> to stay at the top, starting on the same 'line', remove the h1 { float:left; } rule.

Upvotes: 2

Related Questions