動的なCSSレイアウトのヘルプ

Question

非常に弾力性のある単一のCSSレイアウトを作成しようとしています。それで、私は3つの列のレイアウトがあり、ヘッダとフッタがすべてコンテナ内にあり、中央に配置されていることを意味します。私はそれをグラフィックスに適するようにしたかったので、コンテナに入れました。したがって、コンテナによって私は非常に迅速に解像度を変更することができます。

コンテナでは、解像度を下げるときにその効果が必要なので、floatを使用して3列のレイアウトを作成しました。中央と右のdivが左側に並ぶブラウザウィンドウ。このようにして、ページは非常に弾力性があり、ブラウザ、解像度、モバイルデバイスにも優しいものになります。

私は完璧なレイアウトだと信じていましたが、解決する方法がわからない大きな問題が1つあります。

左の列（メニュー）を左に浮かして、幅を設定してください（将来のCSSボタンのサイズが同じになるようにします）。次に、ブラウザのメニューの横にそれを浮かべるように設定されたmax-widthを指定して、メインコンテンツdivを左に浮かべています。幅が設定されていなければ、メニューdivの下に浮かびます。そして最後に、右側の列divに幅を設定し、左に浮かべます。コンテンツdivに十分なテキストがある場合、このレイアウトは完璧です。

しかし、テキストの幅が十分でない場合、コンテンツのdivは小さくなり、すべてが左にシフトし、コンテナの右側に多くのスペースが残るため、基本的にレイアウトが破損します。

ブラウザがコンテンツdivに達すると直ちに水平スクロールバーが表示され、私は欲しくないので、固定幅に設定する必要がなく、幅を広げるためにいくつかのトリックがあることを期待していたかもしれませんこれはすぐに起こる。

私はパーセント幅に設定しようとしましたが、それは奇妙に見えます。

私のレイアウトはhere, on my school webserverでホストされています。右のdivを右に浮かべた若干古いバージョンですが、そうでない場合は私の説明どおりです。

いくつかのCSS方法がある場合は、教えてください。ありがとう。

Answer 1

なぜセンターコンテンツをフローティングにする必要がありますか？左divを左に浮動させた場合、右divを右にして中央のコンテンツを含め、中央にコンテンツを配置します。最大幅を制限するには、コンテナのdiv内にすべてを配置することが必要な場合があります。

Answer 2

使用率

#left_menu{ width:15%; } 
#content{ width:72.5%; } 
#right_menu{ width:12.5%; } 

---

更新あなたは、左右が固定されると、中央のみが内部で左右のdivを入れ、その後浮上させることにしたい場合は

センター。中心の相対的な位置、および絶対的な左右の位置。 http://www.jsfiddle.net/gaby/mBuf9/