CSS bar with controls to the right - css

Question

Here's a nice jsFiddle illustrating the problem
I'm trying to create a titlebar element which...
is only ever 1 line tall
has controls in the top right which are always present
has a title in the top left, which gets truncated with "..." if it's too long
Does anyone know how I'd go about fixing this? I'm a bit stumped.
.item {
border: 1px solid grey;
display: inline-block;
margin-right: 1em;
width: 25%;
}
.titlebar {
background: red;
overflow: hidden;
padding: 0.5em;
text-overflow: ellipsis;
}
.title {
overflow: hidden;
white-space: nowrap;
}
i {
font-style: normal;
float: right;
}
.content {
min-height: 15em;
}
<div class="item">
<div class="titlebar">
<span class="title">My title</span>
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
</div>
<div class="content">
This is the most simple use-case - a nice short title, everything works tickety-boo.
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="title">My title which is just right...</span>
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
</div>
<div class="content">
This is how it should look if the title is too long (obviously this title is just the right length, but pretend there are other words after it).
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="title">My title which is really far too long for a sensible title to be</span>
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
</div>
<div class="content">
This is the problem: the title is way longer than can fit, and it pushes the buttons down on to a second line.
</div>
</div>

Answer 1

For a solution without fixed sizes change the order of the .title and .controls in the html. This makes sure that when you set float: right on the .controls that the controls are rendered first and will occur on the first line. After this you need to have overflow: hidden, text-overflow: ellipsis, white-space: nowrap and display: block on the .title
I've updated your example to reflect this.
.item {
border: 1px solid grey;
display: inline-block;
margin-right: 1em;
width: 25%;
}
.titlebar {
background: red;
overflow: hidden;
padding: 0.5em;
}
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}
i {
font-style: normal;
float: right;
}
.content {
min-height: 15em;
}
.controls {
float: right;
}
<div class="item">
<div class="titlebar">
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
<span class="title">My title</span>
</div>
<div class="content">
This is the most simple use-case - a nice short title, everything works tickety-boo.
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
<span class="title">My title which is just right...</span>
</div>
<div class="content">
This is how it should look if the title is too long (obviously this title is just the right length, but pretend there are other words after it).
</div>
</div>
<div class="item">
<div class="titlebar">
<span class="controls">
<i>-</i><i>+</i><i>X</i>
</span>
<span class="title">My title which is really far too long for a sensible title to be</span>
</div>
<div class="content">
This is the problem: the title is way longer than can fit, and it pushes the buttons down on to a second line.
</div>
</div>

Answer 2

Here's your answer.
I floated the objects and gave them a width of 70% and 30%.
enter link description here
Hope this helps you, and is what you're looking for. if not, add a comment and i'll try to help you.