Question

I have a crude header bar set up on fiddler: http://jsfiddle.net/bCJts/

It looks ok at present, but if you shrink the window then eventually the RH box is pushed onto the next line.

I would like to make it so that when the left and the right sections meet, the left section is reduced in width and any text is truncated – so that whatever happens, both sections remain on the same line.

I can think of several ways of doing this, but none are ideal:

1) Set a specific max-width property: However, sometimes there is no content in the LH box, which rules out using %’s as it would leave a big space. Fixed values are out because the window in which the header appears can vary in width

2) Use js to set the width on render – this is my fallback position if no css solution is available.

Answer 1

well.. this almost achieve’s what you want but the RH’s height varies.. check it out yourself..

DEMO

If you want the contents of something to stay in the same line — your best bet is to go with tables — either the display:table ( cross browser issues creep up) way or the html’s <table> way.. i’ve given you the html’s sol as it’s cross browser compatible.And the changes are as follows..

<div class="header">
<table>
    <tr>
    <td class="headerLeftBlock ">
        <span class="head1">This is my Main Title and it is getting really long sometimes</span>
        <br />
        <span class="head2">This is my Subtitle</span>
    </td>
        
    <td class="headerRightBlock">
        <span>Some Menu Control maybe</span>
    </td>
</tr>
    </table>​

In css, i’ve added width:auto to enable your case of dynamic content for LH

* {border: 0; margin: 0; padding: 0;}
.header {height:40px;padding: 0 0 0 5px;}

.head1
{
height:auto;
font-size:16px;
font-weight: bold;
text-overflow: ellipsis;
word-wrap:break-word;
overflow:hidden;
display:inline-block;
border:1px solid red;
}

.head2
{
font-size:12px;
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
display:inline-block;
border:1px solid red;
}
.headerLeftBlock {
float:left;
width:auto;
overflow:hidden;
border:1px solid green;
}    

.headerRightBlock
{
width:auto;
height:auto;
border: 1px solid green;
}​