私はシオマネキに設定し、粗ヘッダーバー持つ変数幅

Question

に対処するためのヘッダーバーのスタイル：http://jsfiddle.net/bCJts/

をそれは現時点ではOKに見えますが、あなたは、ウィンドウを縮小した場合、最終的にRHボックスは、次にプッシュされますライン。

左セクションと右セクションが一致すると、左セクションの幅が縮小され、テキストが切り捨てられて何らかの処理が行われるように、両方のセクションが同じ行に残るようにしたいと考えています。

私はこれを行うにはいくつかの方法を考えることができますが、どれも理想的ではない：

1）特定のmax-widthプロパティを設定します。しかし、時には％を使用してルールLHボックス、にはコンテンツがありませんそれは大きなスペースを残すので。ヘッダーが表示されるウィンドウの幅が異なる可能性があるため、固定値が出力されます

2）jsを使用してレンダリングの幅を設定します。CSS解決が利用できない場合はフォールバックポジションです。あなたが何かの内容が同じ行に滞在したい場合

Answer 1

も。これは、ほとんど何をしたいのを達成したがRHの高さが変化する。..は..

DEMO

を自分でそれをチェックアウト - あなたの最善の策は、テーブルを持って行くことです - display:table（クロスブラウザーでのクリープアップ）またはhtmlの<table>のいずれかの方法です。私はあなたにhtmlのsolを教えてくれました。クロスブラウザー互換です。

<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>​ 

CSSで0

は、私はあなたが何を変えたの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; 
}​