<div>デフォルトでは、要素は「ブロック」レベルの要素です。これが意味するのは、現在の行と「インライン」であるのではなく、常に新しい行と見なすことができるものが前にあるということです。
リンク先のjsFiddleで、またはに変更div.rightしてみてください(CSSの25行目)。これにより、が現在の行と「インライン」で表示されます。display:inline;display:inline-block;<div>
私が提案する変更を示すためにあなたのフィドルをフォークしました:http:
//jsfiddle.net/CBEGS/1/
垂直方向の余白を調整する必要があり、折り返しによってボタンが次の行に折り返される可能性があることに注意してください。ただし、これらの個別の問題を解決することは、個別の質問の対象です:)
div.right右揃えと左揃えにh1.nobreakするには、幅div.header_divを100%に設定して、狭いdivの右側ではなくページの右側に揃える必要がある場合があります。
また、これらの質問は関連性があるかもしれません:
2つのインラインブロックを同じ行に左右に揃えます
"text-align:justify;" インラインブロック要素は適切ですか?