別のdiv内の2つのdivを中央に配置して右に浮かべるにはどうすればよいですか？

Question

私は2つのdivをページに対して相対的にセンタリングされたもの（ページタイトル）と右側に浮かぶもの（ナビゲーションバー）で表示させたいと思っています。私はそのページに関連してタイトルを中心にすることはできません。私ができることは、ナビゲーションバーの左に残っているスペースを基準にして中心を置くことです。

これは、私が抱えている問題を示しています。

<style> 
    .page { 
    width: 400px; 
    margin: 0 auto; 
    background: red; 
    } 
    .navbar { 
    float: right; 
    } 
    .title { 
     text-align: center; 
    } 
</style> 


<div class='page'> 
    <div class='navbar'> 
    navbar 
    </div> 
    <div class='title'> 
    <h1>TITLE GOES HERE</h1> 
    </div> 
</div> 

これには簡単な解決策がありますか？

Answer 1

どのようにthisですか？

<style> 
    .page { 
    width: 400px; 
    margin: 0 auto; 
    background: red; 
    position:relative; 
    } 
    .navbar { 
    position:absolute; 
    right:2px; 
    } 
    .title { 
     text-align: center; 
    } 
</style> 


<div class='page'> 
    <div class='navbar'> 
    navbar 
    </div> 
    <div class='title'> 
    <h1>TITLE GOES HERE</h1> 
    </div> 
</div>