css - CSS - float とラップ不可の div を分割する

Question

OK、これを説明するのは難しいです。フローティング div とラップ不可の div の 2 つの要素があり、その HTML は次のようになります。

<div id='page'>
  <div id='left'>
    some information
  </div>
  <div id='center'>
    do not break this
  </div>
</div>

これはCSSです：

#center{
  text-align: center;
  white-space: nowrap;
}
#left{
  float:left;
}
#page{
  width: 800px;
  background-color: #999;
}

結果：

コンテナー (#page) はサイズ変更可能で、100px のように小さくすることができます。ここに私の問題があります。#center div は、コンテナーの外側にある場合でも、右側に保持されます。

コンテナーが次のように小さい場合、#center div が #left の下にある必要があります。

これは jsfiddle のコードです: https://jsfiddle.net/p41xh4o3/

ご協力ありがとうございました！