- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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>
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.
Possibly but not with CSS
If it’s possible, it would required JS.
There might be options if you can change the HTML structure.
Ah, I see you have your answer on Stack Overflow.