html - 流体 CSS フロート

Question

私が取り組んでいるサイトの流体要素を作成しようとしています。この JS フィドルをチェックして、ブラウザーを少し広くしてください。灰色の線、黒いボックス、そして灰色の線が表示されます。

ブラウザの幅を狭くすると右側の行が次の行に切れてしまうのですが、これはブラウザの幅に関係なくまとまって欲しいです。私は通常フロートを使用しますが、いくつかのcssがコメントアウトされていることがわかるように、いくつか試してみました。

クールなトリックを教えてくれる人はいますか? どんな助けでも大歓迎です！情報が必要な場合はお知らせください。

http://jsfiddle.net/r8Xka/

CSS

header .lower{
    overflow:hidden;
    width:95%;
    margin:40px auto 0 auto;
}
header .lower .line{
    /*float:left;*/
    display:inline-block;
    background:#eaebeb;
    width:35%;
    height:8px;
    /*display:block;*/
    position:relative;
    top:18px;
}
header .lower a{
    /*float:left;*/
    display:inline-block;
    margin:0 20px;
    /*display:block;*/
    background: #000;
    width: 141px;
    height: 42px;
}

HTML

<header data-behavior="randomHeader">           
  <div class="lower">
    <div class="line"></div>
    <a href="" title="Play Video" class="btn-play_video" data-behavior="video">Play Video</a>
    <div class="line"></div>
  </div>
</header>